<!-- 企业微信 -->
<template>
  <div v-if="isDesktop" class="pc">
    <div class="container-l">
      <!-- 预约会议按钮 -->
      <a-button
        class="btn white-btn"
        size="large"
        @click="openScheduleMeetingModal"
        @cancel="closeScheduleMeetingModal"
      >
        <template #icon>
          <icon-calendar style="color: #2E71FF;" />
        </template>
        <template #default>预约会议</template>
      </a-button>
      <!-- 历史会议按钮已移除 -->
      <!-- 会议室预约按钮 -->
      <a-button
        class="btn white-btn"
        size="large"
        @click="openRoomBookingModal"
      >
        <template #icon>
          <icon-calendar style="color: #FFB800;" />
        </template>
        <template #default>
          <span style="font-size: 12px; display: inline-block; line-height: 1.2; text-align: center;">
            会议室<br />预约
          </span>
        </template>
      </a-button>
      <!-- 启动软件按钮 -->
      <a-button
        class="btn white-btn"
        size="large"
        @click="onStartApp"
      >
        <template #icon>
          <icon-thunderbolt style="color: #4CAF50;" />
        </template>
        <template #default>启动软件</template>
      </a-button>
      <!-- 新增微信授权按钮 -->
      <a-button
        class="btn white-btn"
        size="large"
        @click="goToWechatAuth"
      >
        <template #icon>
          <icon-user-add style="color: #07C160;" />
        </template>
        <template #default>用户注册</template>
      </a-button>
      <!-- 北京富创会议室预约平台按钮 -->
      <a-button
        class="btn white-btn"
        size="large"
        :disabled="!userId"
        @click="goToFuchuangMeeting"
      >
        <template #icon>
          <icon-link style="color: #2E71FF;" />
        </template>
        <template #default>北京富创<br />会议室预约平台</template>
      </a-button>
    </div>

    <!-- 表格 -->
    <div class="container-r">
      <!-- 历史会议的列表 start---------------------------->
      <div v-if="meetingSwitchValue === 2">
        <a-button
          style="width: 7rem"
          class="btn"
          type="primary"
          size="large"
          @click="backAppointment()"
        >
          <template #icon>
            <!-- <icon-calendar /> -->
          </template>
          <template #default>返回</template>
        </a-button>
        <div>
          <div
            v-if="!noDataState && meetingSwitchValue === 2"
            class="meeting-list"
          >
            <a-spin :loading="meetingLoading">
              <div v-for="item in historyMeetingList" :key="item.date">
                <div class="title">{{ getDateValue(item.date) }}</div>
                <div
                  v-for="meeting in item.meetInfos"
                  :key="meeting.id"
                  class="meeting-item"
                >
                  <div class="name-box">
                    <div class="name">{{ meeting.subject }}</div>
                    <div
                      class="status"
                      :class="[`status-${meeting.conferenceState}`]"
                    >
                      {{ getConferenceState(meeting.conferenceState) }}
                    </div>
                    <!-- 三点菜单按钮 -->
                  </div>
                  <div class="date">
                    {{ getTime(meeting.startTime) }} - {{ getTime(meeting.endTime).split(' ')[2] }}
                    <template v-if="meeting.subInfo">
                      ({{ meeting.subInfo }}
                      <a-popover
                        v-if="meeting.cycleEndDate"
                        position="top"
                        trigger="click"
                        :unmount-on-close="true"
                      >
                        <template #content>
                          <div class="cycle-end-date-tip">直到 {{ meeting.cycleEndDate }} 结束</div>
                        </template>
                        <span class="cycle-hint">
                          <img src="@/assets/icons/hint.svg" alt="提示" class="hint-icon" />
                        </span>
                      </a-popover>)
                    </template>
                  </div>
                  <div class="promoter">发起人 {{ meeting.createUserName }}</div>
                  <div class="participant">
                    参会人 {{ getParticipantStr(meeting.participants) }}
                  </div>
                  <div v-if="meeting.meetType === 0 && meeting.location" class="location-info">
                    地点 {{ meeting.location }}
                  </div>
                  <div style="display: flex; gap: 10px">
                    <div></div>
                  </div>
                </div>
              </div>
            </a-spin>
          </div>
        </div>
      </div>
      <!-- 历史会议的列表 end---------------------------->
      <!-- 预约会议列表 start---------------------------->
      <div v-if="meetingSwitchValue === 1">
        <!-- 添加历史会议按钮到右上角 -->
        <div class="history-button-container">
          <a-button
            class="history-btn"
            type="primary"
            style="background: #f0f0f0; color: #333; border: none; border-radius: 16px;"
            @click="historyMettingChange()"
          >
            <template #default>
              <span class="history-btn-text">历史会议</span>
              <icon-right class="history-btn-arrow" />
            </template>
          </a-button>
        </div>
        <div class="search-query">
          <GiForm
            v-model="form"
            :options="options"
            :columns="columns"
          />
          <a-button
            class="reset-btn"
            type="outline"
            @click="resetSearch"
          >
          刷新
          </a-button>
        </div>
        <div
          v-if="!noDataState && meetingSwitchValue === 1"
          class="meeting-list"
        >
          <a-spin :loading="meetingLoading">
            <div v-for="item in meetingList" :key="item.date">
              <div class="title">{{ getDateValue(item.date) }}</div>
              <div
                v-for="meeting in item.meetInfos"
                :key="meeting.id"
                class="meeting-item"
              >
                <div class="name-box">
                  <div class="name">{{ meeting.subject }}</div>
                  <div
                    class="status"
                    :class="[`status-${meeting.conferenceState}`]"
                  >
                    {{ getConferenceState(meeting.conferenceState) }}
                  </div>
                  <!-- 三点菜单按钮 -->
                  <a-dropdown v-if="userId === meeting.createUser && meeting.conferenceState !== 1" trigger="click">
                    <img src="@/assets/icons/menu-three-flex.svg" class="menu-three-icon" style="width: 20px; height: 20px; cursor: pointer; margin-left: 8px;" />
                    <template #content>
                      <a-doption @click.stop="editMeeting(meeting)">编辑会议</a-doption>
                      <a-doption @click.stop="showCancelConfirm(meeting)">取消会议</a-doption>
                      <a-doption v-if="meeting.circleType === 1" @click.stop="openSubMeetingModal(meeting)">编辑子会议</a-doption>
                    </template>
                  </a-dropdown>
                </div>
                <div class="date">
                  {{ getTime(meeting.startTime) }} - {{ getTime(meeting.endTime).split(' ')[2] }}
                  <template v-if="meeting.subInfo">
                    ({{ meeting.subInfo }}
                    <a-popover
                      v-if="meeting.cycleEndDate"
                      position="top"
                      trigger="click"
                      :unmount-on-close="true"
                    >
                      <template #content>
                        <div class="cycle-end-date-tip">直到 {{ meeting.cycleEndDate }} 结束</div>
                      </template>
                      <span class="cycle-hint">
                        <img src="@/assets/icons/hint.svg" alt="提示" class="hint-icon" />
                      </span>
                    </a-popover>)
                  </template>
                </div>
                <div class="promoter">发起人 {{ meeting.realname }}</div>
                <div class="participant">
                  参会人 {{ getParticipantStr(meeting.participants) }}
                </div>
                <div v-if="meeting.meetType === 0 && meeting.location" class="location-info">
                  地点 {{ meeting.location }}
                </div>
                <div style="display: flex; gap: 10px">
                  <div>
                    <a-button type="text" class="gray-btn" @click.stop="toUrl(meeting.conferenceId)">
                      <template #icon>
                        <icon-double-right />
                      </template>
                      <template #default>进入会议</template>
                    </a-button>
                  </div>
                  <div>
                    <a-button
                      class="copy-btn gray-btn"
                      type="text"
                      @click.stop="copyLink(meeting)"
                    >
                      <template #icon>
                        <img src="@/assets/icons/joinLink.svg" class="link-icon" alt="链接" />
                      </template>
                      复制链接
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </a-spin>
        </div>
      </div>
      <!-- 预约会议列表 end ---------------------------->
      <div v-if="noDataState" class="noData">
        <a-empty>
          <template #image>
            <img src="@/assets/images/icon_empty.png" alt="empty" />
          </template>
          <template #default>暂无会议</template>
        </a-empty>
      </div>
    </div>
  </div>
  <!-- web响应式移动端 -------------------------------------------------------------------- -->
  <div v-else-if="isMobile" class="h5">
    <!-- 预约会议 start--------------------------------------->
    <div v-if="meetingSwitchValue === 1" class="container">
      <!-- 搜索框和历史会议按钮 -->
      <div class="search-box">
        <a-input-search
          v-model="searchKeyword"
          placeholder="搜索会议"
          @search="handleMobileSearch"
        />
        <div class="right-btn">
          <a-button
            class="btn reset-btn-mobile"
            @click="resetMobileSearch"
          >
            刷新
          </a-button>
          <a-button
            class="btn white-btn history-btn"
            @click="historyMettingChange"
          >
            <template #default>
              历史会议
              <icon-right style="color: #333;" />
            </template>
          </a-button>
        </div>
      </div>
      <div v-if="!noDataState" class="meeting-list">
        <a-spin :loading="meetingLoading">
          <div
            v-for="item in meetingList"
            :key="item.date"
            class="meeting-info"
          >
            <div class="title" v-html="getDateValue(item.date)"></div>
            <div class="meeting">
              <div
                v-for="meeting in item.meetInfos"
                :key="meeting.id"
                class="meeting-item"
                @click="goToMeetingDetail(meeting)"
              >
                <div class="name-box">
                  <div class="name">{{ meeting.subject }}</div>
                  <div
                    class="status"
                    :class="[`status-${meeting.conferenceState}`]"
                  >
                    {{ getConferenceState(meeting.conferenceState) }}
                  </div>
                  <!-- 移动端三点菜单已删除 -->
                </div>
                <div class="date">
                  {{ getTime(meeting.startTime) }} - {{ getTime(meeting.endTime).split(' ')[2] }}
                </div>
                <div class="promoter">发起人 {{ meeting.realname }}</div>
                <div class="participant">
                  参会人 {{ getParticipantStr(meeting.participants) }}
                </div>
                <div v-if="meeting.meetType === 0 && meeting.location" class="location-info">
                  地点 {{ meeting.location }}
                </div>
              </div>
            </div>
          </div>
        </a-spin>
      </div>
      <div v-if="noDataState" class="noData">
        <a-empty>
          <template #image>
            <img src="@/assets/images/icon_empty.png" alt="empty" />
          </template>
          <template #default>暂无会议</template>
        </a-empty>
      </div>
    </div>
    <!-- 预约会议 end--------------------------------------->
    <!-- 历史会议 start---------------------------------->
    <div v-if="meetingSwitchValue === 2">
      <a-button
        style="width: 5rem"
        type="primary"
        size="large"
        @click="backAppointment()"
      >
        <template #icon>
          <icon-arrow-left />
        </template>
        <template #default>返回</template>
      </a-button>

      <div
        v-if="meetingSwitchValue === 2"
        class="container"
        style="padding: 20px 0px; height: 77vh"
      >
        <div v-if="!noDataState" style="overflow-y: auto">
          <a-spin :loading="meetingLoading">
            <div
              v-for="item in historyMeetingList"
              :key="item.date"
              class="meeting-info"
            >
              <div class="title" v-html="getDateValue(item.date)"></div>
              <div class="meeting">
                <div
                  v-for="meeting in item.meetInfos"
                  :key="meeting.id"
                  class="meeting-item"
                >
                  <div class="name-box">
                    <div class="name">{{ meeting.subject }}</div>
                    <div
                      class="status"
                      :class="[`status-${meeting.conferenceState}`]"
                    >
                      {{ getConferenceState(meeting.conferenceState) }}
                    </div>
                    <!-- 移动端三点菜单已删除 -->
                  </div>
                  <div class="date">
                    {{ getTime(meeting.startTime) }} - {{ getTime(meeting.endTime).split(' ')[2] }}
                  </div>
                  <div class="promoter">发起人 {{ meeting.createUserName }}</div>
                  <div v-if="meeting.meetType === 0 && meeting.meetRoomName" class="promoter">地点 {{ meeting.meetRoomName }}</div>
                  <div class="participant">
                    参会人 {{ getParticipantStr(meeting.participants) }}
                  </div>
                </div>
              </div>
            </div>
          </a-spin>
        </div>
        <div v-if="noDataState" class="noData">
          <a-empty>
            <template #image>
              <img src="@/assets/images/icon_empty.png" alt="empty" />
            </template>
            <template #default>暂无会议</template>
          </a-empty>
        </div>
      </div>
    </div>
    <!-- 历史会议 end---------------------------------->
    <div class="mobile-bottom-buttons">
      <a-button class="btn schedule-btn" @click="openScheduleMeetingModal">
        <template #icon>
          <icon-calendar />
        </template>
        <template #default>预约会议</template>
      </a-button>
      <a-button
        class="btn room-booking-btn"
        @click="openRoomBookingModal"
      >
        <template #icon>
          <icon-calendar />
        </template>
        <template #default>
          <span style="font-size: 12px; display: inline-block; line-height: 1.2; text-align: center;">
            会议室<br />预约
          </span>
        </template>
      </a-button>
      <a-button class="btn start-app-btn" @click="onStartApp">
        <template #icon>
          <icon-thunderbolt />
        </template>
        <template #default>启动软件</template>
      </a-button>
      <!-- 新增移动端微信授权按钮 -->
      <a-button class="btn wechat-auth-btn" @click="goToWechatAuth">
        <template #icon>
          <icon-user-add />
        </template>
        <template #default>用户注册</template>
      </a-button>
    </div>
  </div>

  <!-- 预约会议弹窗 -->
  <a-modal
    v-model:visible="showScheduleMeetingModal"
    :title="isEditMode ? '编辑会议' : '预约会议'"
    :wrap-class-name="isMobile ? 'mobile-modal-wrap' : ''"
    :width="isMobile ? '90%' : 600"
    @ok="onScheduleMeetingSubmit"
  >
    <a-form :model="formData" layout="vertical">
      <!-- 会议主题 -->
      <a-form-item class="subject-input subject-align-row subject-bg-row">
        <div class="subject-input-wrapper">
          <a-input
            v-model="formData.subject"
            placeholder="请输入会议主题"
            :max-length="50"
            :show-word-limit="false"
            style="padding-right:32px;"
          />
          <span
            v-if="formData.subject"
            class="clear-btn"
            @click="formData.subject = ''"
          >×</span>
        </div>
      </a-form-item>

      <!-- 参会人部分 -->
      <a-form-item class="attendees-input">
        <!-- 参会人搜索容器，包含标签和搜索框 -->
        <div class="attendees-search-row">
          <span class="form-label" style="  margin-top: 16px;">参会人</span>
          <div class="search-input-btn-group">
            <div class="search-input-container">
              <a-input-search
                v-model="searchKeyword"
                placeholder="搜索参会人"
                allow-clear
                style="  margin-top: 16px;"
                @search="handleSearch"
              />
              <div v-if="searchUserResults.length > 0" class="search-results-dropdown">
                <div
                  v-for="user in searchUserResults"
                  :key="user.userId"
                  class="search-result-item"
                  @click="handleSelectUser(user.userId)"
                >
                  <div class="user-option">
                    <img :src="user.avatar || 'https://via.placeholder.com/30'" alt="头像" class="user-option-avatar" />
                    <span>{{ user.username }}</span>
                  </div>
                </div>
              </div>
              <div v-else-if="searchKeyword && searchUserResults.length === 0" class="search-results-dropdown">
                <div class="no-results">
                  无搜索结果
                </div>
              </div>
            </div>
            <a-button type="outline" class="add-attendee-btn white-btn" style="margin-top: 16px;" @click="openUserSelector">
              <template #icon>
                <img src="@/assets/icons/wecom-addUser.svg" class="add-user-icon" />
              </template>
            </a-button>
          </div>
        </div>

        <!-- 已选择的参会人列表 -->
        <div class="attendees-list-wrapper">
          <div v-if="selectedUsers.length > 0" class="selected-attendees compact-attendees">
            <template v-for="user in selectedUsers.slice(0, 12)" :key="user.userid">
              <div class="attendee-item attendee-card attendee-col-2">
                <div class="attendee-avatar">
                  <img :src="user.avatar || 'https://via.placeholder.com/30'" alt="头像" />
                </div>
                <div class="attendee-name">{{ user.name.length > 3 ? `${user.name.slice(0, 3)}...` : user.name }}</div>
                <a-button
                  class="remove-btn"
                  type="text"
                  size="mini"
                  @click="removeAttendee(user.userid)"
                >
                  <template #icon>
                    <icon-close />
                  </template>
                </a-button>
              </div>
            </template>
            <div v-if="selectedUsers.length > 12" class="attendee-more-btn" @click="showAllAttendeesModal = true">
              +{{ selectedUsers.length - 12 }} 更多
            </div>
          </div>
        </div>
        <!-- 全部参会人弹窗 -->
        <a-modal v-model:visible="showAllAttendeesModal" title="全部参会人" :footer="false" width="480px">
          <div class="all-attendees-modal-list">
            <template v-for="user in selectedUsers" :key="user.userid">
              <div class="attendee-item attendee-card attendee-col-2">
                <div class="attendee-avatar">
                  <img :src="user.avatar || 'https://via.placeholder.com/30'" alt="头像" />
                </div>
                <div class="attendee-name">{{ user.name.length > 3 ? `${user.name.slice(0, 3)}...` : user.name }}</div>
              </div>
            </template>
          </div>
        </a-modal>
      </a-form-item>

      <!-- 时间选择组 -->
      <div class="time-picker-container">
        <!-- 日期和时间选择在同一行 -->
        <div class="date-time-row">
          <span class="form-label">开始</span>
          <div class="datetime-container">
            <!-- 日期选择器 -->
            <a-date-picker
              v-model="formData.startDate"
              format="YYYY-MM-DD"
              placeholder="选择日期"
              class="date-picker"
              :disabled-date="disabledDate"
              @change="onDateChange"
            />
            <!-- 时间选择器 -->
            <a-time-picker
              v-model="formData.startTimeOfDay"
              format="HH:mm"
              placeholder="选择时间"
              class="time-picker"
              @change="onTimeChange"
            />
          </div>
        </div>

        <!-- 时长选择 -->
        <div v-if="!formData.isCustomEndTime" class="date-time-row">
          <span class="form-label">时长</span>
          <div class="picker-container">
            <a-select
              v-model="formData.durationType"
              placeholder="请选择时长"
              class="duration-select"
              @change="handleDurationChange"
            >
              <a-option value="30">30分钟</a-option>
              <a-option value="60">1小时</a-option>
              <a-option value="120">2小时</a-option>
              <a-option value="180">3小时</a-option>
              <a-option value="custom">自定义结束时间</a-option>
            </a-select>
          </div>
        </div>

        <!-- 自定义结束时间 -->
        <div v-if="formData.isCustomEndTime" class="date-time-row">
          <span class="form-label">结束</span>
          <div class="datetime-container">
            <!-- 结束日期选择器 -->
            <a-date-picker
              v-model="formData.endDate"
              format="YYYY-MM-DD"
              placeholder="选择日期"
              class="date-picker"
              :disabled-date="disabledDate"
              @change="calculateDurationFromEndTime"
            />
            <!-- 结束时间选择器 -->
            <a-time-picker
              v-model="formData.endTimeOfDay"
              format="HH:mm"
              placeholder="选择时间"
              class="time-picker"
              @change="calculateDurationFromEndTime"
            />
          </div>
        </div>
      </div>

      <!-- 会议室选择 (选择后为现场会议，不选为云会议) -->
      <a-form-item class="location-input-form-item">
        <div class="location-input-row location-input-row-border">
          <span class="form-label" style="margin-left: -12px; margin-top: -18px;">地点</span>
          <a-input
            v-model="selectedRoomName"
            placeholder="选择会议室后将呼叫会议大屏"
            readonly
            class="location-input-right location-input-border"
            style="margin-left: -18px;width: 495px;margin-top: -18px;"
            @click="onLocationInputClick"
          />
          <a-button
            v-if="selectedRoomName"
            type="text"
            class="clear-location-btn"
            style="margin-top: -18px;margin-left: -33.5px;"
            @click.stop="clearRoomSelection"
          >
            <template #icon>
              <icon-close />
            </template>
          </a-button>
        </div>
      </a-form-item>

      <!-- 会议室选择弹窗 -->
      <a-modal
        v-model:visible="showRoomSelectModal"
        title="选择会议室"
        :width="isMobile ? '100%' : 800"
        :wrap-class-name="isMobile ? 'mobile-modal-wrap' : ''"
        :z-index="4000"
        :get-container="() => document.body"
        @cancel="showRoomSelectModal = false"
        @ok="confirmRoomSelection"
      >
        <div class="location-selectors">
          <a-form-item label="厂区" class="location-item">
            <a-select
              :key="factoryList.length"
              v-model="selectedFactoryId"
              placeholder="厂区"
              class="location-select"
              @change="onFactoryChange"
            >
              <a-option
                v-for="factory in factoryList"
                :key="factory.id"
                :value="factory.id.toString()"
                :label="factory.name"
              >
                {{ factory.name }}
              </a-option>
            </a-select>
          </a-form-item>

          <a-form-item label="办公楼" class="location-item">
            <a-select
              v-model="selectedBuildingId"
              placeholder="请选择办公楼"
              @change="onBuildingChange"
            >
              <a-option
                v-for="building in buildingList"
                :key="building.id"
                :value="building.id"
              >
                {{ building.name }}
              </a-option>
            </a-select>
          </a-form-item>

          <a-form-item label="楼层" class="location-item">
            <a-select
              v-model="selectedFloor"
              placeholder="请选择楼层"
              :disabled="!selectedBuildingId"
              @change="onFloorChange"
            >
              <a-option
                v-for="floor in floorList"
                :key="floor"
                :value="floor"
              >
                {{ floor }}
              </a-option>
              <!-- 当没有楼层数据时显示提示 -->
              <template v-if="floorList.length === 0" #empty>
                <div style="text-align: center; padding: 20px; color: #999;">
                  {{ selectedBuildingId ? '该办公楼暂无楼层信息' : '请先选择办公楼' }}
                </div>
              </template>
            </a-select>
          </a-form-item>
        </div>

        <div class="meeting-rooms-list">
          <div class="section-title">会议室</div>
          <div class="rooms-grid" style="max-height: 300px; overflow-y: auto; padding-right: 8px;">
            <div
              v-for="room in meetingRoomList"
              :key="room.id"
              class="room-card"
              :class="{ selected: tempSelectedRoomId === room.id }"
              @click="tempSelectedRoomId = room.id"
            >
              <div class="room-image">
                <img
                  :src="room.imageUrl"
                  alt="会议室图片"
                  @click.stop="openImageModal(room.imageUrl)"
                />
              </div>
              <div class="room-info">
                <div class="room-name">{{ room.name }}</div>
                <div class="room-capacity">
                  {{ room.floor }}层 · 可容纳{{ room.capacity }}人
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>

      <!-- 新增：提醒下拉框 -->
      <a-form-item class="remind-select-form-item">
        <div class="remind-select-row">
          <span class="form-label" style="margin-top: -35px;">提醒</span>
          <a-select
            v-model="formData.remindTime"
            placeholder="请选择提醒时间"
            style="width: 495px;margin-left: -18px;margin-top: -35px"
          >
            <a-option value="0">会议开始时</a-option>
            <a-option value="5">5分钟前</a-option>
            <a-option value="15">15分钟前</a-option>
            <a-option value="60">1小时前</a-option>
            <a-option value="1440">1天前</a-option>
          </a-select>
        </div>
      </a-form-item>

      <!-- 邀请大屏选项已隐藏，默认值为1（是） -->

      <!-- 周期会议设置 -->
      <div v-if="isEditMode ? isRecurringMeeting : true" style="margin-bottom: 16px;">
        <div style="display: flex; align-items: center;">
          <div style="display: flex; align-items: center;">
            <span style="white-space: nowrap;margin-right: 36px;margin-top: -15px">重复</span>
            <a-select
              v-model="recurrenceType"
              placeholder="请选择重复类型"
              class="duration-select"
              :style="recurrenceType === 'none' ? 'margin-top: -15px;width:495px;' : 'margin-top: -15px;width:300px;'"
              @change="handleRecurrenceTypeChange"
            >
              <a-option value="none">不重复</a-option>
              <a-option value="daily">每天重复</a-option>
              <a-option value="workdays">每个工作日重复</a-option>
              <a-option value="weekly">每周重复</a-option>
              <a-option value="biweekly">每两周重复</a-option>
              <a-option value="monthly">每月重复</a-option>
              <a-option value="custom">自定义...</a-option>
              <a-option v-if="recurrenceType === 'custom-rule'" value="custom-rule">
                <span v-if="cycleParams.cycle === 'Day'">
                  每{{ cycleParams.interval }}天重复
                </span>
                <span v-else-if="cycleParams.cycle === 'Week'">
                  每{{ cycleParams.interval === 1 ? '' : cycleParams.interval }}周的
                  {{ cycleParams.point.map(day => {
                      const weekdayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                      return weekdayNames[day];
                    }).join('、') }}
                  重复
                </span>
                <span v-else-if="cycleParams.cycle === 'Month'">
                  每{{ cycleParams.interval === 1 ? '' : cycleParams.interval }}月的
                  {{ cycleParams.point.map(day => `${day}日`).join('、') }}
                  重复
                </span>
              </a-option>
            </a-select>
            <template v-if="recurrenceType !== 'none' && recurrenceType !== 'custom' && recurrenceType !== null">
              <span style="white-space: nowrap; margin: -15px 8px 0 12px;">结束于</span>
              <a-date-picker
                v-model="cycleParams.endDate"
                format="YYYY-MM-DD"
                placeholder="选择结束日期"
                style="width: 140px; max-width: 120px; flex-shrink: 0;margin-top: -15px;"
                :disabled-date="disabledDate"
              />
            </template>
          </div>
        </div>
      </div>

      <!-- 会议类型 -->
      <a-form-item label="会议类型" class="meeting-type-select" style="display: none;">
        <a-select
          v-model="formData.meetType"
          placeholder="请选择会议类型"
          @change="handleMeetingTypeChange"
        >
          <a-option :value="0">线下会议</a-option>
          <a-option :value="1">线上会议</a-option>
        </a-select>
      </a-form-item>

      <!-- 媒体类型 -->
      <a-form-item label="媒体类型" style="display: none;">
        <a-select
          v-model="formData.mediaTypes"
          placeholder="请选择媒体类型"
          allow-clear
        >
          <a-option value="Voice">音频</a-option>
          <a-option value="HDVideo">视频</a-option>
        </a-select>
      </a-form-item>

      <!-- 来宾设置 -->
      <div class="recurring-meeting-section" style="display: none;">
        <div class="section-title">来宾设置</div>
        <a-space direction="vertical" :size="16" fill>
          <a-checkbox
            v-model="formData.confConfigInfo.isGuestFreePwd"
            @change="handleGuestPwdChange"
          >
            开启来宾密码
          </a-checkbox>

          <a-input
            v-if="formData.confConfigInfo.isGuestFreePwd"
            v-model="formData.confConfigInfo.guestPwd"
            placeholder="请输入来宾密码"
          />

          <a-form-item label="入会范围">
            <a-select
              v-model="formData.confConfigInfo.callInRestriction"
              placeholder="请选择入会限制"
            >
              <a-option :value="0">无限制</a-option>
              <a-option :value="2">企业内部用户</a-option>
              <a-option :value="3">被邀请用户</a-option>
            </a-select>
          </a-form-item>

          <a-checkbox v-model="formData.confConfigInfo.enableWaitingRoom">
            开启等候室
          </a-checkbox>
        </a-space>
      </div>

      <!-- 会议设置按钮 -->
      <a-form-item>
        <div style="display: flex; align-items: center;">
          <span style="margin-right: 8px; color: black;margin-right: 38px;">设置</span>
          <a-button type="outline" style="color: black;border: 1px solid #ccc; background: white;" @click="showSettingsModal = true">
            会议设置
          </a-button>
        </div>
      </a-form-item>

      <!-- 会议服务 - 只有选择了会议地点且非编辑模式才显示 -->
      <a-form-item v-if="formData.meetRoomId && !isEditMode">
        <div style="display: flex; align-items: center;">
          <span class="form-label" style="margin-right: 38px;">服务</span>
          <a-button type="outline" style="color: black;border: 1px solid #ccc; background: white;" @click="openScheduleMeetingServiceModal">
            会议服务
            <span v-if="selectedServices.length > 0" class="service-count">
              ({{ selectedServices.length }})
            </span>
          </a-button>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 会议设置模态框 -->
  <a-modal
    v-model:visible="showSettingsModal"
    title="会议设置"
    @cancel="showSettingsModal = false"
    @ok="confirmSettings"
  >
    <a-form :model="formData" layout="vertical">
      <!-- 媒体类型 -->
      <a-form-item label="媒体类型">
        <a-select
          v-model="formData.mediaTypes"
          placeholder="请选择媒体类型"
          allow-clear
        >
          <a-option value="Voice">音频</a-option>
          <a-option value="HDVideo">视频</a-option>
        </a-select>
      </a-form-item>

      <!-- 线下会议专用参数，仅线下会议显示 -->
      <template v-if="formData.meetType === 0">
        <a-form-item label="是否启用会议签退">
          <a-radio-group v-model="formData.confConfigInfo.enableSignOut" @change="handleScheduleMeetingSignInChange">
            <a-radio :value="1">开启</a-radio>
            <a-radio :value="0">关闭</a-radio>
          </a-radio-group>
        </a-form-item>
        <template v-if="formData.confConfigInfo.enableSignOut === 1">
          <a-form-item label="会议开始前多少分钟可以签到">
            <a-input v-model="formData.confConfigInfo.signInBeforeMinutes" placeholder="请输入分钟数" type="number" min="0" />
          </a-form-item>
          <a-form-item label="会议签到多少分钟后才能签退">
            <a-input v-model="formData.confConfigInfo.signOutMinutesAfterSignIn" placeholder="请输入分钟数" type="number" min="0" />
          </a-form-item>
          <a-form-item label="会议结束多少分钟后不能签退">
            <a-input v-model="formData.confConfigInfo.signOutAfterEndMinutes" placeholder="请输入分钟数" type="number" min="0" />
          </a-form-item>
        </template>
      </template>

      <!-- 来宾设置 -->
      <div class="recurring-meeting-section">
        <div class="section-title">来宾设置</div>
        <a-space direction="vertical" :size="16" fill>
          <a-checkbox
            v-model="formData.confConfigInfo.isGuestFreePwd"
            @change="handleGuestPwdChange"
          >
            开启来宾密码
          </a-checkbox>

          <a-input
            v-if="formData.confConfigInfo.isGuestFreePwd"
            v-model="formData.confConfigInfo.guestPwd"
            placeholder="请输入来宾密码"
          />

          <a-form-item label="入会范围">
            <a-select
              v-model="formData.confConfigInfo.callInRestriction"
              placeholder="请选择入会限制"
            >
              <a-option :value="0">无限制</a-option>
              <a-option :value="2">企业内部用户</a-option>
              <a-option :value="3">被邀请用户</a-option>
            </a-select>
          </a-form-item>

          <a-checkbox v-model="formData.confConfigInfo.enableWaitingRoom">
            开启等候室
          </a-checkbox>
        </a-space>
      </div>
    </a-form>
  </a-modal>

  <!-- 会议服务选择弹窗 -->
  <a-modal
    v-model:visible="showServiceModal"
    title="选择会议服务"
    :width="isMobile ? '95%' : 700"
    @ok="confirmServiceSelection"
    @cancel="cancelServiceSelection"
  >
    <div class="service-modal-content">
      <!-- 服务列表 -->
      <div class="service-list-container">
        <a-checkbox-group v-model="selectedServices" style="width: 100%;">
          <div v-for="service in serveList" :key="service.id" class="service-modal-item">
            <a-checkbox :value="service.id" class="service-checkbox">
              <div class="service-modal-info">
                <div class="service-modal-header">
                  <div class="service-modal-name">{{ service.serviceInfo }}</div>
                  <div class="service-modal-category">{{ service.serviceCate }}</div>
                </div>
                <div class="service-modal-details">
                  <div class="service-modal-person">负责人：{{ service.userName }}</div>
                  <div class="service-modal-factory">{{ service.factoryName }}</div>
                </div>
              </div>
            </a-checkbox>
            <!-- 选中时显示备注输入框 -->
            <div v-if="selectedServices.includes(service.id)" class="service-modal-remark">
              <a-textarea
                v-model="serviceRemarks[service.id]"
                placeholder="请输入该服务的其他需求..."
                :rows="2"
                :max-length="200"
                show-word-limit
                size="small"
              />
            </div>
          </div>
        </a-checkbox-group>
      </div>
    </div>
  </a-modal>

  <!-- 自定义周期会议设置模态框 -->
  <a-modal
    v-model:visible="showCustomRecurrenceModal"
    title="自定义重复设置"
    :width="isMobile ? '95vw' : 480"
    :wrap-class-name="isMobile ? 'mobile-custom-recurrence-modal-wrap' : ''"
    @cancel="cancelCustomRecurrence"
    @ok="confirmCustomRecurrence"
  >
    <a-form layout="vertical">
      <div class="time-picker-group">
        <a-form-item label="循环开始日期">
          <div class="readonly-date">{{ formatStartDate }}</div>
        </a-form-item>

        <a-form-item label="结束于">
          <a-date-picker
            v-model="cycleParams.endDate"
            format="YYYY-MM-DD"
            placeholder="选择结束日期"
            class="end-date-picker"
            style="width: 130px !important; max-width: 150px !important;"
            :disabled-date="disabledDate"
          />
        </a-form-item>

        <a-form-item label="循环类型">
          <a-select
            v-model="cycleParams.cycle"
            placeholder="请选择循环类型"
            class="meeting-type-select"
            @change="onCycleChange"
          >
            <a-option value="Day">日</a-option>
            <a-option value="Week">周</a-option>
            <a-option value="Month">月</a-option>
          </a-select>
        </a-form-item>
      </div>

      <a-form-item label="间隔周期">
        <a-input-number
          v-model="cycleParams.interval"
          :min="1"
          placeholder="请输入间隔数"
        />
      </a-form-item>

      <!-- 添加周几选择 -->
      <a-form-item v-if="cycleParams.cycle === 'Week'" label="选择周几">
        <a-space>
          <a-checkbox-group v-model="cycleParams.point">
            <a-checkbox :value="1">周一</a-checkbox>
            <a-checkbox :value="2">周二</a-checkbox>
            <a-checkbox :value="3">周三</a-checkbox>
            <a-checkbox :value="4">周四</a-checkbox>
            <a-checkbox :value="5">周五</a-checkbox>
            <a-checkbox :value="6">周六</a-checkbox>
            <a-checkbox :value="0">周日</a-checkbox>
          </a-checkbox-group>
        </a-space>
      </a-form-item>

      <!-- 添加月份日期选择 -->
      <a-form-item v-if="cycleParams.cycle === 'Month'" label="选择日期">
        <div class="month-day-selector">
          <a-checkbox-group v-model="cycleParams.point">
            <a-checkbox v-for="day in 31" :key="day" :value="day">{{ day }}日</a-checkbox>
          </a-checkbox-group>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 会议室预约弹窗 -->
  <a-modal
    v-model:visible="showRoomBookingModal"
    title-align="start"
    width="850px"
    :modal-style="{ maxHeight: '80vh' }"
    :body-style="{ padding: '0', maxHeight: 'calc(80vh - 100px)', overflow: 'hidden' }"
    @ok="onRoomBookingSubmit"
    @cancel="handleRoomBookingCancel"
  >
    <template #title>会议室预约</template>
    <div class="tabs-container">
      <a-tabs
        v-model:active-key="roomBookingActiveTab"
        default-active-key="1"
        class="fixed-tabs"
        @change="onRoomBookingTabChange"
      >
        <a-tab-pane key="1" title="会议信息">
          <div class="tabs-content">
            <a-form :model="roomBookingFormData" layout="vertical">
      <!-- 会议类型选择 -->
      <div class="form-section">
        <h3 class="section-title">会议类型</h3>
        <a-form-item>
          <div class="meeting-type-buttons">
            <a-button
              :type="roomBookingFormData.meetType === 0 ? 'primary' : 'outline'"
              @click="roomBookingFormData.meetType = 0"
            >
              <template #icon>
                <icon-relation />
              </template>
              现场会议
            </a-button>
          </div>
        </a-form-item>
      </div>

      <!-- 基本信息 -->
      <div class="form-section">
        <h3 class="section-title">基本信息</h3>
        <div class="form-row">
          <a-form-item label="会议主题" field="subject" validate-trigger="blur" class="form-item-full">
            <a-input v-model="roomBookingFormData.subject" placeholder="请输入会议主题" />
          </a-form-item>
        </div>

        <div class="form-row">
          <a-form-item label="开始时间" field="startTime" validate-trigger="blur" class="form-item-half">
            <a-date-picker
              v-model="roomBookingFormData.startDate"
              show-time
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
              :disabled-date="disabledDate"
              @change="onRoomBookingDateChange"
            />
          </a-form-item>

          <a-form-item label="结束时间" field="endTime" validate-trigger="blur" class="form-item-half">
            <a-date-picker
              v-model="roomBookingFormData.endDate"
              show-time
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
              :disabled-date="disabledDate"
              @change="calculateRoomBookingDurationFromEndTime"
            />
          </a-form-item>
        </div>
      </div>

      <!-- 与会人设置 -->
      <div class="form-section">
        <h3 class="section-title">与会人设置</h3>
        <a-form-item>
          <a-button type="primary" @click="openRoomBookingUserSelector">
            邀请与会人
          </a-button>
        </a-form-item>

        <div v-if="roomBookingSelectedUsers.length > 0" class="selected-users">
          <div
            v-for="(user, index) in roomBookingSelectedUsers"
            :key="user.userid"
            class="user-card"
          >
            <img
              :src="user.avatar || 'https://via.placeholder.com/30'"
              class="user-avatar"
            />
            <span class="user-name">{{ user.name }}</span>
            <span
              class="delete-btn"
              @click="removeRoomBookingAttendee(user.userid)"
            >✖</span>
          </div>
        </div>
      </div>

      <!-- 会议室选择 -->
      <div class="form-section">
        <h3 class="section-title">会议室选择</h3>
        <div class="location-selectors">
          <a-select
            v-model="selectedFactoryId"
            placeholder="请选择厂区"
            class="location-select"
            :popup-max-height="300"
            @change="onFactoryChange"
          >
            <a-option
              v-for="factory in factoryList"
              :key="factory.id"
              :value="factory.id.toString()"
              :label="factory.name"
            >
              {{ factory.name }}
            </a-option>
          </a-select>

          <a-select
            v-model="selectedBuildingId"
            placeholder="请选择办公楼"
            class="location-select"
            :popup-max-height="300"
            @change="onBuildingChange"
          >
            <a-option
              v-for="building in buildingList"
              :key="building.id"
              :value="building.id"
              :label="building.name"
            />
          </a-select>

          <a-select
            v-model="selectedFloor"
            placeholder="请选择楼层"
            class="location-select"
            :popup-max-height="300"
            :disabled="!selectedBuildingId"
            @change="onFloorChange"
          >
            <a-option
              v-for="floor in floorList"
              :key="floor"
              :value="floor"
              :label="floor"
            >
              {{ floor }}
            </a-option>
            <!-- 当没有楼层数据时显示提示 -->
            <template v-if="floorList.length === 0" #empty>
              <div style="text-align: center; padding: 20px; color: #999;">
                {{ selectedBuildingId ? '该办公楼暂无楼层信息' : '请先选择办公楼' }}
              </div>
            </template>
          </a-select>
        </div>

        <div v-if="meetingRoomList.length > 0" class="meeting-room-grid">
          <div class="room-grid">
            <div v-for="item in meetingRoomList" :key="item.id" class="room-card"
                 :class="{ 'room-card-selected': roomBookingFormData.meetRoomId === item.id }"
                 @click="selectRoomBookingRoom(item.id)">
              <div class="room-content">
                <div class="room-image">
                  <img :src="item.imageUrl || '/static/images/default-room.png'" alt="会议室图片" />
                </div>
                <div class="room-info">
                  <div class="room-name">{{ item.name }}</div>
                  <div class="room-details">
                    <div class="detail-item">
                      <icon-user-group />可容纳{{ item.capacity }}人
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 媒体类型 - 隐藏但保持默认值 -->
      <a-form-item label="媒体类型" style="display: none;">
        <a-select
          v-model="roomBookingFormData.mediaTypes"
          placeholder="请选择媒体类型"
          allow-clear
        >
          <a-option value="HDVideo">视频</a-option>
          <a-option value="Voice">语音</a-option>
        </a-select>
      </a-form-item>

      <!-- 邀请大屏选项已隐藏，默认值为1（是） -->

      <!-- 周期设置 -->
      <div class="form-section">
        <h3 class="section-title">周期设置</h3>
        <a-form-item>
          <a-checkbox v-model="isRoomBookingRecurringMeeting" @change="toggleRoomBookingRecurringMeeting">
            启用周期会议
          </a-checkbox>
        </a-form-item>

        <div v-if="isRoomBookingRecurringMeeting" class="cycle-settings">
          <div class="form-row">
            <a-form-item label="循环开始日期" field="cycleParams.startDate" class="form-item-half">
              <div class="readonly-date">{{ roomBookingFormatStartDate }}</div>
            </a-form-item>

            <a-form-item label="循环结束日期" field="cycleParams.endDate" class="form-item-half">
              <a-date-picker
                v-model="roomBookingCycleParams.endDate"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDate"
              />
            </a-form-item>
          </div>

          <div class="form-row">
            <a-form-item label="循环类型" field="cycleParams.cycle" class="form-item-half">
              <a-select
                v-model="roomBookingCycleParams.cycle"
                placeholder="请选择循环类型"
                @change="onRoomBookingCycleChange"
              >
                <a-option value="Day">日</a-option>
                <a-option value="Week">周</a-option>
                <a-option value="Month">月</a-option>
              </a-select>
            </a-form-item>

            <a-form-item label="间隔周期" field="cycleParams.interval" class="form-item-half">
              <a-input-number v-model="roomBookingCycleParams.interval" :min="1" />
              <span class="unit-text">{{ getRoomBookingIntervalUnit }}</span>
            </a-form-item>
          </div>

          <template v-if="roomBookingCycleParams.cycle === 'Week'">
            <a-form-item label="每周选择" field="cycleParams.point">
              <a-checkbox-group v-model="roomBookingCycleParams.point" class="weekday-group">
                <a-checkbox :value="1">星期一</a-checkbox>
                <a-checkbox :value="2">星期二</a-checkbox>
                <a-checkbox :value="3">星期三</a-checkbox>
                <a-checkbox :value="4">星期四</a-checkbox>
                <a-checkbox :value="5">星期五</a-checkbox>
                <a-checkbox :value="6">星期六</a-checkbox>
                <a-checkbox :value="0">星期天</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
          </template>

          <template v-if="roomBookingCycleParams.cycle === 'Month'">
            <a-form-item label="每月选择" field="cycleParams.point">
              <div class="month-days-grid">
                <a-checkbox-group v-model="roomBookingCycleParams.point">
                  <a-checkbox v-for="day in 31" :key="day" :value="day">
                    {{ day }}
                  </a-checkbox>
                </a-checkbox-group>
              </div>
              <span v-if="roomBookingInvalidDateWarning" class="warning-text">
                请注意，某些日期在二月份可能不存在。
              </span>
            </a-form-item>
          </template>
        </div>
      </div>

      <!-- 会议类型 -->
      <a-form-item label="会议类型" class="meeting-type-select" style="display: none;">
        <a-select
          v-model="roomBookingFormData.meetType"
          placeholder="请选择会议类型"
          @change="handleRoomBookingMeetingTypeChange"
        >
          <a-option :value="0">线下会议</a-option>
          <a-option :value="1">线上会议</a-option>
        </a-select>
      </a-form-item>
</a-form>
          </div>
        </a-tab-pane>

        <a-tab-pane key="2" title="会议服务">
          <div class="tabs-content">
            <div class="meeting-service">
              <div class="header">
                <div class="title">会议服务</div>
                <div class="actions">
                  <a-button type="primary" @click="addRoomBookingServiceItem">
                    <template #icon>
                      <icon-plus />
                    </template>
                  </a-button>
                  <a-button @click="deleteRoomBookingServiceItem">
                    <template #icon>
                      <icon-minus />
                    </template>
                  </a-button>
                </div>
              </div>
              <div class="content">
                <!-- 空状态显示 -->
                <div v-if="roomBookingServiceData.length === 0" class="empty-state">
                  <div class="empty-icon">📋</div>
                  <div class="empty-text">暂无会议服务</div>
                  <div class="empty-description">点击上方 "+" 按钮添加会议服务</div>
                </div>

                <div v-for="(item, index) in roomBookingServiceData" :key="index" class="service-item">
                  <div class="service-row">
                    <div class="input-group">
                      <span class="label">服务项目：</span>
                      <a-input-search
                        readonly
                        :model-value="item.serviceName"
                        placeholder="请选择"
                        class="input service-input"
                        @click="showRoomBookingServiceSelectModal(index)"
                      />
                    </div>
                    <div class="input-group">
                      <span class="label">负责人：</span>
                      <a-input
                        readonly
                        disabled
                        :model-value="item.responsiblePerson"
                        placeholder="负责人自动带出"
                        class="input"
                        style="background: #f5f5f5;"
                      />
                    </div>
                  </div>
                  <div class="input-group other-service">
                    <span class="label">其他会议服务：</span>
                    <a-input
                      readonly
                      :model-value="item.description"
                      placeholder="请输入"
                      class="input full-width"
                      @click="showRoomBookingOtherServiceInput(index)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="3" title="会议设置">
          <div class="tabs-content">
            <a-form :model="roomBookingFormData" layout="vertical">
<!-- 签到设置 -->
              <a-form-item label="签到设置">
                <a-radio-group v-model="roomBookingFormData.confConfigInfo.enableSignOut" @change="handleRoomBookingSignInChange">
                  <a-radio :value="1">开启</a-radio>
                  <a-radio :value="0">关闭</a-radio>
                </a-radio-group>
              </a-form-item>

              <!-- 签到时间配置 - 只有开启签到时才显示 -->
              <template v-if="roomBookingFormData.confConfigInfo.enableSignOut === 1">
                <a-form-item label="会议开始前多少分钟可以签到">
                  <a-input
                    v-model="roomBookingFormData.confConfigInfo.signInBeforeMinutes"
                    placeholder="请输入分钟数"
                    type="number"
                    min="0"
                  />
                </a-form-item>
                <a-form-item label="会议签到多少分钟后才能签退">
                  <a-input
                    v-model="roomBookingFormData.confConfigInfo.signOutMinutesAfterSignIn"
                    placeholder="请输入分钟数"
                    type="number"
                    min="0"
                  />
                </a-form-item>
                <a-form-item label="会议结束多少分钟后不能签退">
                  <a-input
                    v-model="roomBookingFormData.confConfigInfo.signOutAfterEndMinutes"
                    placeholder="请输入分钟数"
                    type="number"
                    min="0"
                  />
                </a-form-item>
              </template>
            </a-form>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <template #footer>
      <div>
        <a-button @click="handleRoomBookingCancel">取消</a-button>
        <a-button type="primary" :loading="isRoomBookingSubmitting" :disabled="!isRoomBookingFormValid || isRoomBookingSubmitting" @click="onRoomBookingSubmit">确定</a-button>
      </div>
    </template>
  </a-modal>

  <!-- 会议服务项目选择弹窗 -->
  <a-modal
    v-model:visible="showRoomBookingServiceModal"
    title="选择服务项目"
    :width="800"
    @ok="confirmRoomBookingServiceSelection"
    @cancel="cancelRoomBookingServiceSelection"
  >
    <div class="service-modal-content">
      <div class="service-list-container">
        <div
          v-for="service in serveList"
          :key="service.id"
          class="service-modal-item"
          :class="{ selected: roomBookingSelectedService?.id === service.id }"
          @click="selectRoomBookingService(service)"
        >
          <div class="service-modal-info">
            <div class="service-modal-header">
              <div class="service-modal-name">{{ service.serviceInfo }}</div>
              <div class="service-modal-category">{{ service.serviceCate || '服务项目' }}</div>
            </div>
            <div class="service-modal-details">
              <div v-if="service.userName" class="service-modal-person">负责人：{{ service.userName }}</div>
              <div v-if="service.factoryName" class="service-modal-factory">{{ service.factoryName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>

  <!-- 其他会议服务输入弹窗 -->
  <a-modal
    v-model:visible="showRoomBookingOtherServiceModal"
    title="其他会议服务"
    :width="500"
    @ok="confirmRoomBookingOtherService"
    @cancel="cancelRoomBookingOtherService"
  >
    <a-form layout="vertical">
      <a-form-item label="服务描述">
        <a-textarea
          v-model="roomBookingOtherServiceText"
          placeholder="请输入其他会议服务描述"
          :rows="4"
          :max-length="200"
          show-word-limit
        />
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 会议室占用情况弹窗 -->
  <!-- 会议室占用情况弹窗 -->
  <!-- 会议室占用情况弹窗 -->
  <!-- 会议室占用情况弹窗 -->

  <a-modal
    v-model:visible="showRoomStatusModal"
    title="会议室使用情况"
    :width="isMobile ? '100%' : 1200"
    fullscreen
  >
    <div class="date-selector">
      <a-button @click="goToToday">今天</a-button>
      <span>{{ formattedDate }}</span>
      <icon-caret-left class="icon-time" type="left" @click="prevDay" />
      <icon-caret-right class="icon-time" type="right" @click="nextDay" />
    </div>
    <div class="timeline">
      <div class="timeline-header">
        <div class="hour-label">00:00</div>
        <div v-for="hour in 24" :key="hour" class="hour-label">
          {{ String(hour).padStart(2, "0") }}:00
        </div>
      </div>
      <div v-for="room in roomStatus" :key="room.id" class="timeline-container">
        <div class="room-info">
          <span>{{ room.roomName }}</span>
          <span>({{ room.floor }}层, {{ room.capacity }}人)</span>
        </div>
        <div class="timeline-bar">
          <div
            v-for="i in 100"
            :key="i"
            class="occupancy-slot"
            :class="[
              { occupied: isOccupied(room.occupancyPeriods, i, selectedDate) },
            ]"
            @click="showInfo(room.occupancyPeriods, i, $event)"
          ></div>
        </div>
      </div>
    </div>
    <div
      v-if="showInfoBox"
      class="info-box"
      :style="{ top: `${infoBoxPosition.y}px`, left: `${infoBoxPosition.x}px` }"
    >
      <p>开始结束时间: {{ currentInfo.start }}-{{ currentInfo.end }}</p>
      <p>预定人: {{ currentInfo.initiator }}</p>
      <p>手机号: {{ currentInfo.phone }}</p>
      <p>部门: {{ currentInfo.department }}</p>
      <a-button @click="closeInfoBox">关闭</a-button>
    </div>
  </a-modal>
  <a-modal
    v-model:visible="showInviteModal"
    title="邀请与会人"
    :width="isMobile ? 360 : 600"
    @ok="handleInviteConfirm"
  >
    <!-- 使用单独的变量和方法进行搜索 -->
    <a-input
      v-model="modalSearchKeyword"
      placeholder="输入姓名或手机号搜索"
      allow-clear
      class="search-input"
      @input="handleModalSearch"
    />
    <!-- 显示模态框内的搜索结果 -->
    <div v-if="modalSearchResults.length > 0" class="modal-search-results">
      <div
        v-for="user in modalSearchResults"
        :key="user.userId"
        class="search-result-item"
        @click="handleModalSelectUser(user.userId)"
      >
        <div class="user-option">
          <a-checkbox
            :model-value="checkedUserIds.includes(user.userId)"
            @change="(checked) => handleModalUserCheckChange(user.userId, checked)"
            @click.stop
          />
          <img :src="user.avatar || 'https://via.placeholder.com/30'" alt="头像" class="user-option-avatar" />
          <span>{{ user.username }}</span>
        </div>
      </div>
    </div>
    <!-- 原始组织树 -->
    <a-tree
      v-model:checked-keys="checkedUserIds"
      checkable
      :data="userTreeData"
      action-on-node-click="expand"
      class="invite-tree"
    />
    <template #footer>
      <a-button @click="() => showInviteModal = false">取消</a-button>
      <a-button type="outline" class="white-btn" @click="handleInviteConfirm">确定</a-button>
    </template>
  </a-modal>

  <a-modal
    v-model:visible="showImageModal"
    title="会议室图片"
    @cancel="closeImageModal"
    @check="onCheck"
  >
    <img :src="selectedImage" alt="大图" class="large-image" />
  </a-modal>

  <div class="meeting-form">
    <div class="form-content">
      <a-form
        :model="formData"
        :rules="rules"
        layout="vertical"
        class="meeting-form"
      >
        <!-- 原有的表单内容 -->
      </a-form>
    </div>
    <div class="form-footer">
      <a-space>
        <a-button @click="resetForm">重置</a-button>
        <a-button type="primary" @click="submitForm">提交</a-button>
      </a-space>
    </div>
  </div>

  <!-- 移动端预约会议弹窗 -->
  <a-modal
    v-model:visible="showMobileSchedulePage"
    :width="isMobile ? '95vw' : 600"
    :mask-closable="true"
    :closable="true"
    :footer="false"
    :wrap-class-name="isMobile ? 'mobile-schedule-modal-wrap' : ''"
    title="预约会议"
    @cancel="closeMobileSchedulePage"
  >
    <div class="mobile-schedule-content">
      <!-- 主题输入框 - 无标签，无边框，不在form内 -->
      <div class="subject-row-full">
        <input
                  v-model="formData.subject"
                  placeholder="请输入会议主题"
          maxlength="50"
          class="subject-input-native"
                />
              </div>

      <a-form :model="formData" layout="vertical">
        <div class="form-divider"></div>

        <!-- 参会人选择 -->
        <div class="mobile-form-row">
          <span class="form-label">参会人</span>
            <div class="mobile-attendees-bar" @click="openMobileUserSelector">
              <div class="attendees-avatars">
                <template v-if="selectedUsers.length > 4">
                  <span class="attendees-ellipsis">…共{{ selectedUsers.length }}人</span>
                  <div v-for="user in selectedUsers.slice(-3)" :key="user.userid" class="attendee-avatar">
                    <img :src="user.avatar || 'https://via.placeholder.com/30'" />
                  </div>
                </template>
                <template v-else-if="selectedUsers.length">
                  <div v-for="user in selectedUsers" :key="user.userid" class="attendee-avatar">
                    <img :src="user.avatar || 'https://via.placeholder.com/30'" />
                  </div>
                </template>
                <template v-else>
                  <span class="placeholder-text">请选择参会人</span>
                </template>
              </div>
            </div>
              </div>
        <div class="form-divider"></div>

        <!-- 开始时间 -->
        <div class="mobile-form-row">
          <span class="form-label">开始</span>
          <div class="mobile-start-time-wrapper-left">
            <span class="mobile-date-block-gray" @click.stop="showStartTimePicker = true; activePickerTab = 'date'">{{ getStartDateDisplay() }}</span>
            <span class="mobile-time-block-gray" @click.stop="showStartTimePicker = true; activePickerTab = 'time'">{{ getStartTimeDisplay() }}</span>
            </div>
        </div>
        <div class="form-divider"></div>

        <!-- 时长 -->
        <div class="mobile-form-row">
          <span class="form-label">{{ formData.isCustomEndTime ? '结束' : '时长' }}</span>
          <div class="mobile-duration-wrapper-left" @click="showDurationModal = true">
                <template v-if="formData.isCustomEndTime">
              <span class="mobile-date-block-gray" @click.stop="showEndTimePicker = true; activeEndPickerTab = 'date'">{{ getEndDateDisplay() }}</span>
              <span class="mobile-time-block-gray" @click.stop="showEndTimePicker = true; activeEndPickerTab = 'time'">{{ getEndTimeDisplay() }}</span>
                </template>
                <template v-else>
              <span class="duration-value">{{ getDurationLabel(formData.durationType) }}</span>
                </template>
              </div>
            </div>
        <div class="form-divider"></div>

        <!-- 地点选择 -->
        <div class="mobile-form-row">
          <span class="form-label">地点</span>
          <div class="mobile-location-input-white" @click="onLocationInputClick">
            <span v-if="selectedRoomName" class="location-value">{{ selectedRoomName }}</span>
            <span v-else class="location-placeholder">选择会议室后将呼叫会议大屏</span>
            <a-button
              v-if="selectedRoomName"
              type="text"
              size="small"
              @click.stop="clearRoomSelection"
            >
              <template #icon>
                <icon-close />
              </template>
            </a-button>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 重复设置 -->
        <div v-if="isEditMode ? isRecurringMeeting : true" class="mobile-form-row">
          <span class="form-label">重复</span>
          <div class="select-wrapper">
            <a-select
              v-model="recurrenceType"
              placeholder="请选择重复类型"
              @change="handleRecurrenceTypeChange"
            >
              <a-option value="none">不重复</a-option>
              <a-option value="daily">每天重复</a-option>
              <a-option value="workdays">每个工作日重复</a-option>
              <a-option value="weekly">每周重复</a-option>
              <a-option value="biweekly">每两周重复</a-option>
              <a-option value="monthly">每月重复</a-option>
              <a-option value="custom">自定义...</a-option>
              <a-option v-if="recurrenceType === 'custom-rule'" value="custom-rule">
                <span v-if="cycleParams.cycle === 'Day'">
                  每{{ cycleParams.interval }}天重复
                </span>
                <span v-else-if="cycleParams.cycle === 'Week'">
                  每{{ cycleParams.interval === 1 ? '' : cycleParams.interval }}周的
                  {{ cycleParams.point.map(day => ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][day]).join('、') }}重复
                </span>
                <span v-else-if="cycleParams.cycle === 'Month'">
                  每{{ cycleParams.interval === 1 ? '' : cycleParams.interval }}月的
                  {{ cycleParams.point.map(day => `${day}日`).join('、') }}重复
                </span>
              </a-option>
            </a-select>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 结束日期选择器 -->
        <div v-if="recurrenceType !== 'none' && recurrenceType !== 'custom' && recurrenceType !== null" class="mobile-form-row">
          <span class="form-label">结束于</span>
          <div class="select-wrapper">
            <a-date-picker
              v-model="cycleParams.endDate"
              format="YYYY-MM-DD"
              placeholder="选择结束日期"
              style="width: 100%;"
              :disabled-date="disabledDate"
            />
          </div>
        </div>
        <div v-if="recurrenceType !== 'none' && recurrenceType !== 'custom' && recurrenceType !== null" class="form-divider"></div>

        <!-- 邀请大屏选项已隐藏，默认值为1（是） -->

        <!-- 会议提醒 -->
        <div class="mobile-form-row">
          <span class="form-label">提醒</span>
          <div class="select-wrapper">
            <a-select
              v-model="formData.remindTime"
              placeholder="请选择提醒时间"
            >
              <a-option value="0">会议开始时</a-option>
              <a-option value="5">5分钟前</a-option>
              <a-option value="15">15分钟前</a-option>
              <a-option value="30">30分钟前</a-option>
              <a-option value="60">1小时前</a-option>
              <a-option value="120">2小时前</a-option>
              <a-option value="1440">1天前</a-option>
            </a-select>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 会议设置 -->
        <div class="mobile-form-row">
          <span class="form-label">设置</span>
          <div class="setting-wrapper">
            <a-button type="outline" style="width: 100%;" @click="showMobileSettingsModal = true">
              会议设置
            </a-button>
          </div>
        </div>

        <!-- 会议服务 - 只有选择了会议地点且非编辑模式才显示 -->
        <template v-if="formData.meetRoomId && !isEditMode">
          <div class="mobile-form-row">
            <span class="form-label">服务</span>
            <div class="setting-wrapper">
              <a-button type="outline" style="width: 100%;" @click="openScheduleMeetingServiceModal">
                会议服务
                <span v-if="selectedServices.length > 0" class="mobile-service-count">
                  ({{ selectedServices.length }})
                </span>
              </a-button>
            </div>
          </div>
</template>

        <!-- 按钮组 -->
        <div class="mobile-form-footer">
          <div class="mobile-bottom-buttons">
            <a-button class="mobile-cancel-btn" @click="closeMobileSchedulePage">取消</a-button>
            <a-button type="primary" class="mobile-confirm-btn" :loading="scheduleLoading" :disabled="scheduleLoading" @click="onScheduleMeetingSubmit">确定</a-button>
          </div>
        </div>
      </a-form>
    </div>
  </a-modal>

  <!-- 移动端编辑会议弹窗 -->
  <a-modal
    v-model:visible="showMobileEditPage"
    :width="isMobile ? '95vw' : 600"
    :mask-closable="true"
    :closable="true"
    :footer="false"
    :wrap-class-name="isMobile ? 'mobile-schedule-modal-wrap' : ''"
    title="编辑会议"
    @cancel="closeMobileEditPage"
  >
    <div class="mobile-schedule-content">
      <!-- 主题输入框 - 无标签，无边框，不在form内 -->
      <div class="subject-row-full">
        <input
          v-model="formData.subject"
          placeholder="请输入会议主题"
          maxlength="50"
          class="subject-input-native"
        />
      </div>

      <a-form :model="formData" layout="vertical">
        <div class="form-divider"></div>

        <!-- 参会人选择 -->
        <div class="mobile-form-row">
          <span class="form-label">参会人</span>
          <div class="mobile-attendees-bar" @click="openMobileUserSelector">
            <div class="attendees-avatars">
              <template v-if="selectedUsers.length > 4">
                <span class="attendees-ellipsis">…共{{ selectedUsers.length }}人</span>
                <div v-for="user in selectedUsers.slice(-3)" :key="user.userid" class="attendee-avatar">
                  <img :src="user.avatar || 'https://via.placeholder.com/30'" />
                </div>
              </template>
              <template v-else-if="selectedUsers.length">
                <div v-for="user in selectedUsers" :key="user.userid" class="attendee-avatar">
                  <img :src="user.avatar || 'https://via.placeholder.com/30'" />
                </div>
              </template>
              <template v-else>
                <span class="placeholder-text">请选择参会人</span>
              </template>
            </div>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 开始时间 -->
        <div class="mobile-form-row">
          <span class="form-label">开始</span>
          <div class="mobile-start-time-wrapper-left">
            <span class="mobile-date-block-gray" @click.stop="showStartTimePicker = true; activePickerTab = 'date'">{{ getStartDateDisplay() }}</span>
            <span class="mobile-time-block-gray" @click.stop="showStartTimePicker = true; activePickerTab = 'time'">{{ getStartTimeDisplay() }}</span>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 时长 -->
        <div class="mobile-form-row">
          <span class="form-label">{{ formData.isCustomEndTime ? '结束' : '时长' }}</span>
          <div class="mobile-duration-wrapper-left" @click="showDurationModal = true">
            <template v-if="formData.isCustomEndTime">
              <span class="mobile-date-block-gray" @click.stop="showEndTimePicker = true; activeEndPickerTab = 'date'">{{ getEndDateDisplay() }}</span>
              <span class="mobile-time-block-gray" @click.stop="showEndTimePicker = true; activeEndPickerTab = 'time'">{{ getEndTimeDisplay() }}</span>
            </template>
            <template v-else>
              <span class="duration-value">{{ getDurationLabel(formData.durationType) }}</span>
            </template>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 地点选择 -->
        <div class="mobile-form-row">
          <span class="form-label">地点</span>
          <div class="mobile-location-input-white" @click="onLocationInputClick">
            <span v-if="selectedRoomName" class="location-value">{{ selectedRoomName }}</span>
            <span v-else class="location-placeholder">如需线下会议请点击选择会议地点</span>
              <a-button
                v-if="selectedRoomName"
                type="text"
              size="small"
                @click.stop="clearRoomSelection"
              >
                <template #icon>
                  <icon-close />
                </template>
              </a-button>
            </div>
        </div>
        <div class="form-divider"></div>

            <!-- 重复设置 -->
        <div v-if="isEditMode ? isRecurringMeeting : true" class="mobile-form-row">
          <span class="form-label">重复</span>
          <div class="select-wrapper">
              <a-select
                v-model="recurrenceType"
                placeholder="请选择重复类型"
                @change="handleRecurrenceTypeChange"
              >
                <a-option value="none">不重复</a-option>
                <a-option value="daily">每天重复</a-option>
                <a-option value="workdays">每个工作日重复</a-option>
                <a-option value="weekly">每周重复</a-option>
                <a-option value="biweekly">每两周重复</a-option>
                <a-option value="monthly">每月重复</a-option>
                <a-option value="custom">自定义...</a-option>
                <a-option v-if="recurrenceType === 'custom-rule'" value="custom-rule">
                  <span v-if="cycleParams.cycle === 'Day'">
                    每{{ cycleParams.interval }}天重复
                  </span>
                  <span v-else-if="cycleParams.cycle === 'Week'">
                    每{{ cycleParams.interval === 1 ? '' : cycleParams.interval }}周的
                    {{ cycleParams.point.map(day => ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][day]).join('、') }}重复
                  </span>
                  <span v-else-if="cycleParams.cycle === 'Month'">
                    每{{ cycleParams.interval === 1 ? '' : cycleParams.interval }}月的
                    {{ cycleParams.point.map(day => `${day}日`).join('、') }}重复
                  </span>
                </a-option>
              </a-select>
            </div>
        </div>
        <div class="form-divider"></div>

            <!-- 结束日期选择器 -->
        <div v-if="recurrenceType !== 'none' && recurrenceType !== 'custom' && recurrenceType !== null" class="mobile-form-row">
          <span class="form-label">结束于</span>
          <div class="select-wrapper">
              <a-date-picker
                v-model="cycleParams.endDate"
                format="YYYY-MM-DD"
                placeholder="选择结束日期"
                style="width: 100%;"
                :disabled-date="disabledDate"
              />
            </div>
        </div>
        <div v-if="recurrenceType !== 'none' && recurrenceType !== 'custom' && recurrenceType !== null" class="form-divider"></div>

        <!-- 会议提醒 -->
        <div class="mobile-form-row">
          <span class="form-label">提醒</span>
          <div class="select-wrapper">
            <a-select
              v-model="formData.remindTime"
              placeholder="请选择提醒时间"
            >
              <a-option value="0">会议开始时</a-option>
              <a-option value="5">5分钟前</a-option>
              <a-option value="15">15分钟前</a-option>
              <a-option value="30">30分钟前</a-option>
              <a-option value="60">1小时前</a-option>
              <a-option value="120">2小时前</a-option>
              <a-option value="1440">1天前</a-option>
            </a-select>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 会议设置 -->
        <div class="mobile-form-row">
          <span class="form-label">设置</span>
          <div class="setting-wrapper">
            <a-button type="outline" style="width: 100%;" @click="showMobileSettingsModal = true">
                会议设置
              </a-button>
            </div>
          </div>

        <!-- 会议服务 - 只有选择了会议地点且非编辑模式才显示 -->
        <template v-if="formData.meetRoomId && !isEditMode">
          <div class="mobile-form-row">
            <span class="form-label">服务</span>
            <div class="setting-wrapper">
              <a-button type="outline" style="width: 100%;" @click="openScheduleMeetingServiceModal">
                会议服务
                <span v-if="selectedServices.length > 0" class="mobile-service-count">
                  ({{ selectedServices.length }})
                </span>
              </a-button>
            </div>
          </div>
</template>

        <!-- 按钮组 -->
        <div class="mobile-form-footer">
          <div class="mobile-bottom-buttons">
            <a-button class="mobile-cancel-btn" @click="closeMobileEditPage">取消</a-button>
            <a-button type="primary" class="mobile-confirm-btn" @click="onEditMeetingSubmit">保存</a-button>
        </div>
        </div>
      </a-form>
    </div>
  </a-modal>

  <!-- 移动端会议室预约弹窗 -->
  <a-modal
    v-model:visible="showMobileRoomBookingPage"
    :width="isMobile ? '95vw' : 600"
    :mask-closable="true"
    :closable="true"
    :footer="false"
    :wrap-class-name="isMobile ? 'mobile-room-booking-modal-wrap' : ''"
    title="会议室预约"
    @cancel="closeMobileRoomBookingPage"
  >
    <div class="mobile-schedule-content">
      <!-- 主题输入框 - 无标签，无边框，不在form内 -->
      <div class="subject-row-full">
        <input
          v-model="roomBookingFormData.subject"
          placeholder="请输入会议主题"
          maxlength="50"
          class="subject-input-native"
        />
      </div>

      <a-form :model="roomBookingFormData" layout="vertical">
        <div class="form-divider"></div>

        <!-- 参会人选择 -->
        <div class="mobile-form-row">
          <span class="form-label">参会人</span>
          <div class="mobile-attendees-bar" @click="openRoomBookingUserSelector">
            <div class="attendees-avatars">
              <template v-if="roomBookingSelectedUsers.length > 4">
                <span class="attendees-ellipsis">…共{{ roomBookingSelectedUsers.length }}人</span>
                <div v-for="user in roomBookingSelectedUsers.slice(-3)" :key="user.userid" class="attendee-avatar">
                  <img :src="user.avatar || 'https://via.placeholder.com/30'" />
                </div>
              </template>
              <template v-else-if="roomBookingSelectedUsers.length">
                <div v-for="user in roomBookingSelectedUsers" :key="user.userid" class="attendee-avatar">
                  <img :src="user.avatar || 'https://via.placeholder.com/30'" />
                </div>
              </template>
              <template v-else>
                <span class="placeholder-text">请选择参会人</span>
              </template>
            </div>
          </div>
        </div>

        <!-- 开始时间 -->
        <div class="mobile-form-row">
          <span class="form-label">开始</span>
          <div class="mobile-start-time-wrapper-left">
            <span class="mobile-date-block-gray" @click.stop="showRoomBookingStartTimePicker = true; roomBookingActiveStartPickerTab = 'date'">{{ getRoomBookingStartDateDisplay() }}</span>
            <span class="mobile-time-block-gray" @click.stop="showRoomBookingStartTimePicker = true; roomBookingActiveStartPickerTab = 'time'">{{ getRoomBookingStartTimeDisplay() }}</span>
          </div>
        </div>

        <!-- 时长 -->
        <div class="mobile-form-row">
          <span class="form-label">{{ roomBookingFormData.isCustomEndTime ? '结束' : '时长' }}</span>
          <div class="mobile-duration-wrapper-left" @click="showRoomBookingDurationModal = true">
            <template v-if="roomBookingFormData.isCustomEndTime">
              <span class="mobile-date-block-gray" @click.stop="showRoomBookingEndTimePicker = true; roomBookingActiveEndPickerTab = 'date'">{{ getRoomBookingEndDateDisplay() }}</span>
              <span class="mobile-time-block-gray" @click.stop="showRoomBookingEndTimePicker = true; roomBookingActiveEndPickerTab = 'time'">{{ getRoomBookingEndTimeDisplay() }}</span>
            </template>
            <template v-else>
              <span class="duration-value">{{ getRoomBookingDurationLabel(roomBookingFormData.durationType) }}</span>
            </template>
          </div>
        </div>

        <!-- 地点选择 -->
        <div class="mobile-form-row">
          <span class="form-label">地点</span>
          <div class="mobile-location-input-white" @click="onRoomBookingLocationInputClick">
            <span v-if="roomBookingSelectedRoomName" class="location-value">{{ roomBookingSelectedRoomName }}</span>
            <span v-else class="location-placeholder">必填，请选择会议室</span>
            <a-button
              v-if="roomBookingSelectedRoomName"
              type="text"
              size="small"
              @click.stop="clearRoomBookingRoomSelection"
            >
              <template #icon>
                <icon-close />
              </template>
            </a-button>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 重复设置 -->
        <div class="mobile-form-row">
          <span class="form-label">重复</span>
          <div class="select-wrapper">
            <a-select
              v-model="roomBookingRecurrenceType"
              placeholder="请选择重复类型"
              @change="handleRoomBookingRecurrenceTypeChange"
            >
              <a-option value="none">不重复</a-option>
              <a-option value="daily">每天重复</a-option>
              <a-option value="workdays">每个工作日重复</a-option>
              <a-option value="weekly">每周重复</a-option>
              <a-option value="biweekly">每两周重复</a-option>
              <a-option value="monthly">每月重复</a-option>
              <a-option value="custom">自定义...</a-option>
              <a-option v-if="roomBookingRecurrenceType === 'custom-rule'" value="custom-rule">
                <span v-if="roomBookingCycleParams.cycle === 'Day'">
                  每{{ roomBookingCycleParams.interval }}天重复
                </span>
                <span v-else-if="roomBookingCycleParams.cycle === 'Week'">
                  每{{ roomBookingCycleParams.interval === 1 ? '' : roomBookingCycleParams.interval }}周的
                  {{ roomBookingCycleParams.point.map(day => {
                      const weekdayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                      return weekdayNames[day];
                    }).join('、') }}
                  重复
                </span>
                <span v-else-if="roomBookingCycleParams.cycle === 'Month'">
                  每{{ roomBookingCycleParams.interval === 1 ? '' : roomBookingCycleParams.interval }}月的
                  {{ roomBookingCycleParams.point.map(day => `${day}日`).join('、') }}
                  重复
                </span>
              </a-option>
            </a-select>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 结束日期选择器 -->
        <div v-if="roomBookingRecurrenceType !== 'none' && roomBookingRecurrenceType !== 'custom' && roomBookingRecurrenceType !== null" class="mobile-form-row">
          <span class="form-label">结束于</span>
          <div class="select-wrapper">
            <a-date-picker
              v-model="roomBookingCycleParams.endDate"
              format="YYYY-MM-DD"
              placeholder="选择结束日期"
              style="width: 100%;"
              :disabled-date="disabledDate"
            />
          </div>
        </div>
        <div v-if="roomBookingRecurrenceType !== 'none' && roomBookingRecurrenceType !== 'custom' && roomBookingRecurrenceType !== null" class="form-divider"></div>

        <!-- 会议提醒 - 手机端隐藏 -->
        <!-- <div class="mobile-form-row">
          <span class="form-label">提醒</span>
          <div class="select-wrapper">
            <a-select
              v-model="roomBookingFormData.remindTime"
              placeholder="请选择提醒时间"
            >
              <a-option value="0">会议开始时</a-option>
              <a-option value="5">5分钟前</a-option>
              <a-option value="15">15分钟前</a-option>
              <a-option value="30">30分钟前</a-option>
              <a-option value="60">1小时前</a-option>
              <a-option value="120">2小时前</a-option>
              <a-option value="1440">1天前</a-option>
            </a-select>
          </div>
        </div>
        <div class="form-divider"></div> -->

        <!-- 会议设置 -->
        <div class="mobile-form-row">
          <span class="form-label">设置</span>
          <div class="setting-wrapper">
            <a-button type="outline" style="width: 100%;" @click="showMobileRoomBookingSettingsModal = true">
              会议设置
            </a-button>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 会议服务 -->
        <div class="mobile-form-row">
          <span class="form-label">服务</span>
          <div class="setting-wrapper">
            <a-button type="outline" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" @click="openRoomBookingServiceModal">
              <span style="display: flex; align-items: center; justify-content: center; width: 100%;">
                <span>会议服务</span>
                <span v-if="roomBookingServiceData.length > 0" class="mobile-service-count" style="margin-left: 4px;">
                  ({{ roomBookingServiceData.length }})
                </span>
              </span>
            </a-button>
          </div>
        </div>
        <div class="form-divider"></div>

        <!-- 媒体类型 - 隐藏但保留默认值 -->
        <!-- <div class="mobile-form-row">
          <span class="form-label">媒体类型</span>
          <div class="radio-wrapper">
            <a-radio-group v-model="roomBookingFormData.mediaTypes">
              <a-radio value="HDVideo">视频</a-radio>
              <a-radio value="Voice">语音</a-radio>
            </a-radio-group>
          </div>
        </div> -->

        <!-- 按钮组 -->
        <div class="mobile-form-footer">
          <div class="mobile-bottom-buttons">
            <a-button class="mobile-cancel-btn" @click="closeMobileRoomBookingPage">取消</a-button>
            <a-button
              type="primary"
              class="mobile-confirm-btn"
              :class="{ 'is-disabled': !isRoomBookingFormValid || isRoomBookingSubmitting }"
              :disabled="!isRoomBookingFormValid || isRoomBookingSubmitting"
              :loading="isRoomBookingSubmitting"
              @click="onRoomBookingSubmit"
            >
              预约
            </a-button>
          </div>
        </div>
      </a-form>
    </div>
  </a-modal>

  <!-- 移动端会议室预约设置弹窗 -->
  <a-modal
    v-model:visible="showMobileRoomBookingSettingsModal"
    title="会议设置"
    :width="isMobile ? '90vw' : 520"
    :z-index="9999"
    :wrap-class-name="isMobile ? 'mobile-room-booking-settings-modal-wrap !important' : ''"
    :get-container="() => document.body"
    @cancel="showMobileRoomBookingSettingsModal = false"
    @ok="confirmRoomBookingSettings"
  >
    <div class="mobile-setting-section">
      <!-- 媒体类型 - 隐藏 -->
      <!-- <div class="mobile-setting-row" style="margin-bottom: 16px;">
        <span class="setting-label">媒体类型</span>
        <a-select
          v-model="roomBookingFormData.mediaTypes"
          placeholder="请选择媒体类型"
          allow-clear
          style="width: 100%;"
        >
          <a-option value="Voice">音频</a-option>
          <a-option value="HDVideo">视频</a-option>
        </a-select>
      </div> -->

      <!-- 签到设置 -->
      <div class="mobile-setting-row" style="margin-bottom: 16px;">
        <span class="setting-label">是否启用会议签退</span>
        <a-radio-group v-model="roomBookingFormData.confConfigInfo.enableSignOut" style="width: 100%;" @change="handleRoomBookingSignInChange">
          <a-radio :value="1">开启</a-radio>
          <a-radio :value="0">关闭</a-radio>
        </a-radio-group>
      </div>

      <template v-if="roomBookingFormData.confConfigInfo.enableSignOut === 1">
        <div class="mobile-setting-row" style="margin-bottom: 16px;">
          <span class="setting-label">会议开始前多少分钟可以签到</span>
          <a-input
            v-model="roomBookingFormData.confConfigInfo.signInBeforeMinutes"
            placeholder="请输入分钟数"
            type="number"
            min="0"
            style="width: 100%;"
          />
        </div>
        <div class="mobile-setting-row" style="margin-bottom: 16px;">
          <span class="setting-label">会议签到多少分钟后才能签退</span>
          <a-input
            v-model="roomBookingFormData.confConfigInfo.signOutMinutesAfterSignIn"
            placeholder="请输入分钟数"
            type="number"
            min="0"
            style="width: 100%;"
          />
        </div>
        <div class="mobile-setting-row" style="margin-bottom: 16px;">
          <span class="setting-label">会议结束后多少分钟内可以签退</span>
          <a-input
            v-model="roomBookingFormData.confConfigInfo.signOutAfterEndMinutes"
            placeholder="请输入分钟数"
            type="number"
            min="0"
            style="width: 100%;"
          />
        </div>
      </template>

      <!-- 来宾密码 - 隐藏 -->
      <!-- <div class="mobile-setting-row" style="margin-bottom: 16px;">
        <span class="setting-label">来宾密码</span>
        <a-checkbox v-model="roomBookingFormData.confConfigInfo.isGuestFreePwd">
          开启来宾密码
        </a-checkbox>
      </div> -->

      <!-- 等候室 - 隐藏 -->
      <!-- <div class="mobile-setting-row" style="margin-bottom: 16px;">
        <span class="setting-label">等候室</span>
        <a-checkbox v-model="roomBookingFormData.confConfigInfo.enableWaitingRoom">
          开启等候室
        </a-checkbox>
      </div> -->
    </div>
  </a-modal>

  <!-- 会议室预约时长选择弹窗 -->
  <a-modal
    v-model:visible="showRoomBookingDurationModal"
    :width="isMobile ? '90vw' : 400"
    title="选择时长"
    :footer="false"
    :wrap-class-name="isMobile ? 'mobile-duration-modal-wrap' : ''"
    :mask-closable="true"
  >
    <div class="duration-options">
      <div
        v-for="option in roomBookingDurationOptions"
        :key="option.value"
        class="duration-option"
        :class="{ selected: roomBookingFormData.durationType === option.value }"
        @click="selectRoomBookingDuration(option.value)"
      >
        {{ option.label }}
      </div>
    </div>
  </a-modal>

  <!-- 会议室预约开始时间选择弹窗 -->
  <div v-if="showRoomBookingStartTimePicker && isMobile" class="mobile-bottom-picker-mask">
    <div class="mobile-bottom-picker-new" @click.stop>
      <div class="picker-header-bar">
        <div class="picker-tabs-bar">
          <div class="picker-tab-bar" :class="[roomBookingActiveStartPickerTab === 'date' ? 'active' : '']" @click="roomBookingActiveStartPickerTab = 'date'">{{ roomBookingTempStartDateLabel }}</div>
          <div class="picker-tab-bar" :class="[roomBookingActiveStartPickerTab === 'time' ? 'active' : '']" @click="roomBookingActiveStartPickerTab = 'time'">{{ roomBookingTempStartTimeLabel }}</div>
        </div>
        <div class="picker-confirm-bar">
          <a-button type="primary" @click="confirmRoomBookingStartTime">确定</a-button>
          <a-button @click="showRoomBookingStartTimePicker = false">取消</a-button>
        </div>
      </div>
      <div class="picker-content-bar">
        <!-- 日期选择器 -->
        <div v-if="roomBookingActiveStartPickerTab === 'date'" class="calendar-bar">
          <div class="calendar-bar-header">
            <a-button type="text" @click="roomBookingStartDateMonth = roomBookingStartDateMonth > 1 ? roomBookingStartDateMonth - 1 : 12; if (roomBookingStartDateMonth === 12) roomBookingStartDateYear--">‹</a-button>
            <span>{{ roomBookingStartDateYear }}年{{ roomBookingStartDateMonth }}月</span>
            <a-button type="text" @click="roomBookingStartDateMonth = roomBookingStartDateMonth < 12 ? roomBookingStartDateMonth + 1 : 1; if (roomBookingStartDateMonth === 1) roomBookingStartDateYear++">›</a-button>
          </div>
          <div class="calendar-bar-week">
            <span v-for="w in ['日', '一', '二', '三', '四', '五', '六']" :key="w">{{ w }}</span>
          </div>
          <div class="calendar-bar-days">
            <span v-for="d in roomBookingStartCalendarDays" :key="d.key"
              class="calendar-day" :class="[d.isCurrent ? 'current' : '', d.isDisabled ? 'disabled' : '', d.isSelected ? 'selected' : '']"
              @click="!d.isDisabled && selectRoomBookingStartCalendarDay(d)"
            >{{ d.day }}</span>
          </div>
        </div>
        <!-- 时间滚轮 -->
        <div v-if="roomBookingActiveStartPickerTab === 'time'" class="time-scroll-bar">
          <div class="time-scroll-col">
            <ul class="time-scroll-list">
              <li v-for="hour in 24" :key="hour - 1"
                  class="time-scroll-item"
                  :class="{
                    active: roomBookingStartTimeHour === hour - 1,
                    disabled: isRoomBookingHourDisabled(hour - 1),
                  }"
                  @click="!isRoomBookingHourDisabled(hour - 1) && (roomBookingStartTimeHour = hour - 1)">
                {{ String(hour - 1).padStart(2, '0') }}
              </li>
            </ul>
          </div>
          <div class="time-scroll-col">
            <ul class="time-scroll-list">
              <li v-for="minute in Array.from({ length: 12 }, (_, i) => i * 5)" :key="minute"
                  class="time-scroll-item"
                  :class="{
                    active: roomBookingStartTimeMinute === minute,
                    disabled: isRoomBookingMinuteDisabled(roomBookingStartTimeHour, minute),
                  }"
                  @click="!isRoomBookingMinuteDisabled(roomBookingStartTimeHour, minute) && (roomBookingStartTimeMinute = minute)">
                {{ String(minute).padStart(2, '0') }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 会议室预约结束时间选择弹窗 -->
  <div v-if="showRoomBookingEndTimePicker && isMobile" class="mobile-bottom-picker-mask">
    <div class="mobile-bottom-picker-new" @click.stop>
      <div class="picker-header-bar">
        <div class="picker-tabs-bar">
          <div class="picker-tab-bar" :class="[roomBookingActiveEndPickerTab === 'date' ? 'active' : '']" @click="roomBookingActiveEndPickerTab = 'date'">{{ roomBookingTempEndDateLabel }}</div>
          <div class="picker-tab-bar" :class="[roomBookingActiveEndPickerTab === 'time' ? 'active' : '']" @click="roomBookingActiveEndPickerTab = 'time'">{{ roomBookingTempEndTimeLabel }}</div>
        </div>
        <span class="picker-confirm-bar" @click="confirmRoomBookingEndTime">确定</span>
      </div>
      <div class="picker-content-bar">
        <!-- 日历选择 -->
        <div v-if="roomBookingActiveEndPickerTab === 'date'" class="calendar-bar">
          <div class="calendar-bar-header">
            <span>{{ roomBookingEndDateYear }}年{{ roomBookingEndDateMonth }}月</span>
          </div>
          <div class="calendar-bar-week">
            <span v-for="w in ['日', '一', '二', '三', '四', '五', '六']" :key="w">{{ w }}</span>
          </div>
          <div class="calendar-bar-days">
            <span v-for="d in roomBookingEndCalendarDays" :key="d.key"
              class="calendar-day" :class="[d.isCurrent ? 'current' : '', d.isDisabled ? 'disabled' : '', d.isSelected ? 'selected' : '']"
              @click="!d.isDisabled && selectRoomBookingEndCalendarDay(d)"
            >{{ d.day }}</span>
          </div>
        </div>
        <!-- 时间滚轮 -->
        <div v-if="roomBookingActiveEndPickerTab === 'time'" class="time-scroll-bar">
          <div class="time-scroll-col">
            <ul class="time-scroll-list">
              <li v-for="hour in 24" :key="hour - 1"
                  class="time-scroll-item"
                  :class="{ active: roomBookingEndTimeHour === hour - 1 }"
                  @click="roomBookingEndTimeHour = hour - 1">
                {{ String(hour - 1).padStart(2, '0') }}
              </li>
            </ul>
          </div>
          <div class="time-scroll-col">
            <ul class="time-scroll-list">
              <li v-for="minute in [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]" :key="minute"
                  class="time-scroll-item"
                  :class="{ active: roomBookingEndTimeMinute === minute }"
                  @click="roomBookingEndTimeMinute = minute">
                {{ String(minute).padStart(2, '0') }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 时长选择弹窗 -->
  <a-modal
    v-model:visible="showDurationModal"
    :width="isMobile ? '90vw' : 400"
    title="选择时长"
    :footer="false"
    :wrap-class-name="isMobile ? 'mobile-duration-modal-wrap' : ''"
    :mask-closable="true"
  >
    <div class="duration-options">
      <div
        v-for="option in durationOptions"
        :key="option.value"
        class="duration-option"
        :class="{ selected: formData.durationType === option.value }"
        @click="selectDuration(option.value)"
      >
        {{ option.label }}
  </div>
    </div>
  </a-modal>

  <!-- 参会人选择弹窗 -->
  <a-modal
    v-model:visible="showMobileUserSelector"
    :width="isMobile ? '90vw' : 600"
    title="选择参会人"
    :footer="false"
    :wrap-class-name="isMobile ? 'mobile-user-selector-modal-wrap' : ''"
    :mask-closable="true"
    @cancel="closeMobileUserSelector"
  >
    <div class="user-selector-content">
      <a-input-search
        v-model="modalSearchKeyword"
        placeholder="搜索参会人"
        allow-clear
        style="margin-bottom: 16px;"
        @search="handleModalSearch"
      />
      <div v-if="modalSearchResults.length > 0" class="modal-search-results">
        <div
          v-for="user in modalSearchResults"
          :key="user.userId"
          class="search-result-item"
          @click="toggleTempUser(user)"
        >
          <a-checkbox :model-value="tempSelectedUsers.some(u => u.userid === user.userId)" />
          <img :src="user.avatar || 'https://via.placeholder.com/30'" class="user-option-avatar" />
          <span>{{ user.username }}</span>
        </div>
      </div>
      <a-tree
        v-model:checked-keys="tempCheckedUserIds"
        checkable
        :data="userTreeData"
        class="invite-tree"
        style="max-height: 40vh; overflow-y: auto;"
      />
    </div>

    <!-- 已选择用户显示区域 -->
    <div v-if="tempSelectedUsers.length > 0" class="selected-users-preview">
      <div class="selected-title">已选择 {{ tempSelectedUsers.length }} 人（点击头像可取消选择）</div>
      <div class="selected-users-avatars">
        <div
          v-for="user in tempSelectedUsers"
          :key="user.userid"
          class="selected-avatar-item clickable"
          @click="removeTempUserById(user.userid)"
        >
          <div class="avatar-wrapper">
        <img :src="user.avatar || 'https://via.placeholder.com/30'" />
            <div class="remove-overlay">
              <icon-close class="remove-icon" />
      </div>
    </div>
          <span class="user-name">{{ user.name || user.username }}</span>
    </div>
  </div>
    </div>

    <!-- 底部按钮 -->
    <div class="user-selector-footer">
      <a-space style="width: 100%; justify-content: flex-end;" size="medium">
        <a-button @click="closeMobileUserSelector">取消</a-button>
        <a-button type="primary" @click="confirmMobileUserSelector">
          确定{{ tempSelectedUsers.length > 0 ? `(${tempSelectedUsers.length})` : '' }}
        </a-button>
      </a-space>
    </div>
  </a-modal>
  <!-- 新增：移动端全屏会议室选择页 -->
  <div v-if="showMobileRoomSelector && isMobile" class="mobile-room-selector-fullpage">
    <button class="close-btn" @click="showMobileRoomSelector = false">×</button>
    <div class="mobile-room-selector-content">
      <!-- 调试用，开发完成后可删除 -->
      <div style="color:red;">{{ factoryList }}</div>
      <div class="location-selectors-row">
        <!-- 改为 Arco Design Vue 推荐写法 -->
        <a-select
          v-model="selectedFactoryId"
          placeholder="厂区"
          class="location-select"
          :options="factoryList.map(f => ({ label: f.name, value: f.id.toString() }))"
          allow-clear
          :field-names="{ label: 'label', value: 'value' }"
          @change="onFactoryChange"
        />
        <a-select
          v-model="selectedBuildingId"
          placeholder="办公楼"
          :options="buildingList.map(b => ({ label: b.name, value: b.id.toString() }))"
          :field-names="{ label: 'label', value: 'value' }"
          class="location-select"
          :disabled="!selectedFactoryId"
          @change="onBuildingChange"
        />
        <a-select
          v-model="selectedFloor"
          placeholder="楼层"
          class="location-select"
          :disabled="!selectedBuildingId"
          @change="onFloorChange"
        >
          <a-option
            v-for="floor in floorList"
            :key="floor"
            :value="floor"
            :label="floor"
          >
            {{ floor }}
          </a-option>
          <!-- 当没有楼层数据时显示提示 -->
          <template v-if="floorList.length === 0" #empty>
            <div style="text-align: center; padding: 20px; color: #999;">
              {{ selectedBuildingId ? '该办公楼暂无楼层信息' : '请先选择办公楼' }}
            </div>
          </template>
        </a-select>
      </div>
      <div class="meeting-rooms-list">
        <div class="section-title">会议室</div>
        <div class="rooms-grid" style="max-height: 50vh; overflow-y: auto; padding-right: 8px;">
          <div
            v-for="room in meetingRoomList"
            :key="room.id"
            class="room-card"
            :class="{ selected: tempSelectedRoomId === room.id }"
            @click="tempSelectedRoomId = room.id"
          >
            <div class="room-image">
              <img
                :src="room.imageUrl"
                alt="会议室图片"
                @click.stop="openImageModal(room.imageUrl)"
              />
            </div>
            <div class="room-info">
              <div class="room-name">{{ room.name }}</div>
              <div class="room-capacity">
                {{ room.floor }}层 · 可容纳{{ room.capacity }}人
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="selector-footer">
        <a-button type="primary" style="width: 100%;" @click="confirmMobileRoomSelection">确定</a-button>
      </div>
    </div>
  </div>
  <!-- 开始时间底部弹窗 -->
  <div v-if="showStartTimePicker && isMobile" class="mobile-bottom-picker-mask">
    <div class="mobile-bottom-picker-new" @click.stop>
      <div class="picker-header-bar">
        <div class="picker-tabs-bar">
          <div class="picker-tab-bar" :class="[activePickerTab === 'date' ? 'active' : '']" @click="activePickerTab = 'date'">{{ tempStartDateLabel }}</div>
          <div class="picker-tab-bar" :class="[activePickerTab === 'time' ? 'active' : '']" @click="activePickerTab = 'time'">{{ tempStartTimeLabel }}</div>
        </div>
        <span class="picker-confirm-bar" @click="confirmStartTime">确定</span>
      </div>
      <div class="picker-content-bar">
        <!-- 日历选择 -->
        <div v-if="activePickerTab === 'date'" class="calendar-bar">
          <div class="calendar-bar-header" style="display: flex; align-items: center; justify-content: center; gap: 12px;">
            <a-button type="text" size="mini" style="padding: 0 8px;" @click.stop="changeMonth(-1)">＜</a-button>
            <span style="min-width: 80px; text-align: center;">{{ dateYear }}年{{ dateMonth }}月</span>
            <a-button type="text" size="mini" style="padding: 0 8px;" @click.stop="changeMonth(1)">＞</a-button>
          </div>
          <div class="calendar-bar-week">
            <span v-for="w in ['日', '一', '二', '三', '四', '五', '六']" :key="w">{{ w }}</span>
          </div>
          <div class="calendar-bar-days">
            <span v-for="d in calendarDays" :key="d.key"
              class="calendar-day" :class="[d.isCurrent ? 'current' : '', d.isDisabled ? 'disabled' : '', d.isSelected ? 'selected' : '']"
              @click="!d.isDisabled && selectCalendarDay(d)"
            >{{ d.day }}</span>
          </div>
        </div>
        <!-- 时间滚轮 -->
        <div v-if="activePickerTab === 'time'" class="time-scroll-bar">
          <div class="time-scroll-col">
            <ul ref="hourListRef" class="time-scroll-list">
              <li v-for="h in hourList" :key="h" class="time-scroll-item" :class="[h === timeHour ? 'selected' : '', isHourDisabled(h, true) ? 'disabled' : '']" @click="!isHourDisabled(h, true) && selectHour(h)">{{ h.toString().padStart(2, '0') }}</li>
            </ul>
          </div>
          <div class="time-scroll-col">
            <ul ref="minuteListRef" class="time-scroll-list">
              <li v-for="m in minuteList" :key="m" class="time-scroll-item" :class="[m === timeMinute ? 'selected' : '', isMinuteDisabled(timeHour, m, true) ? 'disabled' : '']" @click="!isMinuteDisabled(timeHour, m, true) && selectMinute(m)">{{ m.toString().padStart(2, '0') }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 新增：时长选择弹窗 -->
  <div v-if="showDurationPage && isMobile" class="mobile-schedule-fullpage">
    <button class="close-btn" @click="closeDurationPage">×</button>
    <div class="mobile-schedule-content">
      <div class="picker-header-bar">
        <span style="font-size: 18px; font-weight: 500;">选择时长</span>
      </div>
      <div class="duration-options-full">
        <div
          v-for="option in durationOptions"
          :key="option.value"
          class="duration-option-full"
          :class="{ selected: formData.durationType === option.value }"
          @click="selectDuration(option.value)"
        >
          {{ option.label }}
        </div>
      </div>
    </div>
  </div>
  <!-- 新增：结束时间选择弹窗 -->
  <div v-if="showEndTimePicker && isMobile" class="mobile-bottom-picker-mask">
    <div class="mobile-bottom-picker-new" @click.stop>
      <div class="picker-header-bar">
        <div class="picker-tabs-bar">
          <div class="picker-tab-bar" :class="[activeEndPickerTab === 'date' ? 'active' : '']" @click="activeEndPickerTab = 'date'">{{ tempEndDateLabel }}</div>
          <div class="picker-tab-bar" :class="[activeEndPickerTab === 'time' ? 'active' : '']" @click="activeEndPickerTab = 'time'">{{ tempEndTimeLabel }}</div>
        </div>
        <span class="picker-confirm-bar" @click="confirmEndTime">确定</span>
      </div>
      <div class="picker-content-bar">
        <!-- 日历选择 -->
        <div v-if="activeEndPickerTab === 'date'" class="calendar-bar">
          <div class="calendar-bar-header">
            <span>{{ endDateYear }}年{{ endDateMonth }}月</span>
          </div>
          <div class="calendar-bar-week">
            <span v-for="w in ['日', '一', '二', '三', '四', '五', '六']" :key="w">{{ w }}</span>
          </div>
          <div class="calendar-bar-days">
            <span v-for="d in endCalendarDays" :key="d.key"
              class="calendar-day" :class="[d.isCurrent ? 'current' : '', d.isDisabled ? 'disabled' : '', d.isSelected ? 'selected' : '']"
              @click="!d.isDisabled && selectEndCalendarDay(d)"
            >{{ d.day }}</span>
          </div>
        </div>
        <!-- 时间滚轮 -->
        <div v-if="activeEndPickerTab === 'time'" class="time-scroll-bar">
          <div class="time-scroll-col">
            <ul ref="hourListRef" class="time-scroll-list">
              <li v-for="h in hourList" :key="h" class="time-scroll-item" :class="[h === endTimeHour ? 'selected' : '', isHourDisabled(h, false) ? 'disabled' : '']" @click="!isHourDisabled(h, false) && selectEndHour(h)">{{ h.toString().padStart(2, '0') }}</li>
            </ul>
          </div>
          <div class="time-scroll-col">
            <ul ref="minuteListRef" class="time-scroll-list">
              <li v-for="m in minuteList" :key="m" class="time-scroll-item" :class="[m === endTimeMinute ? 'selected' : '', isMinuteDisabled(endTimeHour, m, false) ? 'disabled' : '']" @click="!isMinuteDisabled(endTimeHour, m, false) && selectEndMinute(m)">{{ m.toString().padStart(2, '0') }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端专用会议设置弹窗 -->
  <a-modal
    v-model:visible="showMobileSettingsModal"
    title="会议设置"
    :width="isMobile ? '90vw' : 520"
    :z-index="9999"
    :wrap-class-name="isMobile ? 'mobile-settings-modal-wrap !important' : ''"
    :get-container="() => document.body"
    @cancel="showMobileSettingsModal = false"
    @ok="confirmSettings"
  >
    <div class="mobile-setting-section">
      <!-- 会议配置 -->
      <div class="mobile-setting-row" style="margin-bottom: 16px;">
        <span class="setting-label">媒体类型</span>
        <a-select
          v-model="formData.mediaTypes"
          placeholder="请选择媒体类型"
          allow-clear
          style="width: 100%;"
        >
          <a-option value="Voice">音频</a-option>
          <a-option value="HDVideo">视频</a-option>
        </a-select>
      </div>

      <!-- 线下会议专用参数，仅线下会议显示 -->
      <template v-if="formData.meetType === 0">
        <div class="mobile-setting-row" style="margin-bottom: 16px;">
          <span class="setting-label">是否启用会议签退</span>
          <a-radio-group v-model="formData.confConfigInfo.enableSignOut" style="width: 100%;" @change="handleScheduleMeetingSignInChange">
            <a-radio :value="1">开启</a-radio>
            <a-radio :value="0">关闭</a-radio>
          </a-radio-group>
        </div>
        <template v-if="formData.confConfigInfo.enableSignOut === 1">
          <div class="mobile-setting-row" style="margin-bottom: 16px;">
            <span class="setting-label">会议开始前多少分钟可以签到</span>
            <a-input
              v-model="formData.confConfigInfo.signInBeforeMinutes"
              placeholder="请输入分钟数"
              type="number"
              min="0"
              style="width: 100%;"
            />
          </div>
          <div class="mobile-setting-row" style="margin-bottom: 16px;">
            <span class="setting-label">会议签到多少分钟后才能签退</span>
            <a-input
              v-model="formData.confConfigInfo.signOutMinutesAfterSignIn"
              placeholder="请输入分钟数"
              type="number"
              min="0"
              style="width: 100%;"
            />
          </div>
          <div class="mobile-setting-row" style="margin-bottom: 16px;">
            <span class="setting-label">会议结束多少分钟后不能签退</span>
            <a-input
              v-model="formData.confConfigInfo.signOutAfterEndMinutes"
              placeholder="请输入分钟数"
              type="number"
              min="0"
              style="width: 100%;"
            />
          </div>
        </template>
      </template>

      <div class="mobile-setting-row" style="margin-bottom: 16px;">
        <a-checkbox
          v-model="formData.confConfigInfo.isGuestFreePwd"
          @change="handleGuestPwdChange"
        >
          开启来宾密码
        </a-checkbox>
        <a-input
          v-if="formData.confConfigInfo.isGuestFreePwd"
          v-model="formData.confConfigInfo.guestPwd"
          placeholder="请输入来宾密码"
          style="margin-top: 8px;"
        />
      </div>
      <div class="mobile-setting-row" style="margin-bottom: 16px;">
        <span class="setting-label">入会范围</span>
        <a-select
          v-model="formData.confConfigInfo.callInRestriction"
          placeholder="请选择入会限制"
          style="width: 100%;"
        >
          <a-option :value="0">无限制</a-option>
          <a-option :value="2">企业内部用户</a-option>
          <a-option :value="3">被邀请用户</a-option>
        </a-select>
      </div>
      <div class="mobile-setting-row">
        <a-checkbox v-model="formData.confConfigInfo.enableWaitingRoom">
          开启等候室
        </a-checkbox>
      </div>
    </div>
  </a-modal>
  <a-modal v-model:visible="showSubMeetingModal" title="子会议列表" width="700px" @cancel="showSubMeetingModal = false">
    <div v-if="subMeetingList.length" class="sub-meeting-list">
      <div v-for="sub in subMeetingList" :key="sub.conferenceId" class="sub-meeting-card">
        <div class="sub-meeting-header">
          <span class="sub-meeting-title">{{ sub.subject }}</span>
          <div>
            <a-button type="text" @click="editSubMeeting(sub)">编辑</a-button>
            <a-button v-if="subMeetingList.length > 1" type="text" status="danger" @click="deleteSubMeeting(sub)">删除</a-button>
          </div>
        </div>
        <div class="sub-meeting-info">
          <span class="sub-meeting-time">{{ sub.startTime }} ~ {{ sub.endTime }}</span>
          <span class="sub-meeting-promoter">发起人：{{ sub.realname || sub.createUserName }}</span>
        </div>
      </div>
    </div>
    <div v-else style="text-align:center;color:#999;padding:32px 0;">暂无子会议</div>
  </a-modal>
  <!-- 编辑子会议弹窗 -->
  <a-modal v-model:visible="showEditSubModal" title="编辑子会议" @ok="submitEditSubMeeting" @cancel="showEditSubModal = false">
    <a-form :model="editSubForm">
      <a-form-item label="开始时间">
        <a-date-picker v-model="editSubForm.startTime" show-time format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled-date="disabledDate" />
      </a-form-item>
      <a-form-item label="持续时间(分钟)">
        <a-input-number v-model="editSubForm.length" :min="1" :max="1440" style="width: 100%" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { debounce } from 'lodash-es'
import { Message } from '@arco-design/web-vue'
import { useRoute, useRouter } from 'vue-router'
import type { IMeeting } from './type'
import http from '@/utils/http'
import {
  escMeeting,
  getAvailableFloor,
  getAvailableRooms,
  getBuildingList,
  getFactoryList,
  getHistoryMeetingList,
  getMeetInfo,
  getMeetingList,
  getRoom,
  getRoomStatus,
  getUserTree,
  meetConflict,
  scheduleMeeting,
  searchUsersAndDevices,
  updateMeeting
} from '@/apis/startApp/meeting'
import { useDevice, useForm } from '@/hooks'
import { useUserStore } from '@/stores'
// 获取用户树
defineOptions({ name: 'StartApp' })

// 获取用户store
const userStore = useUserStore()
const historyMeetingList = ref<any>([]) // 历史会议列表
// 控制邀请弹窗
const showInviteModal = ref(false)
// 控制预约会议弹窗
const showScheduleMeetingModal = ref(false)
const showSettingsModal = ref(false)
const showCustomRecurrenceModal = ref(false) // 自定义周期会议设置模态框的显示状态
const recurrenceType = ref('none') // 重复类型，默认为不重复
const hoverIndex = ref(-1) // 记录鼠标悬停的索引
// 选择的厂区和办公楼
const selectedFactoryId = ref<string>('')
/**
 * 会议控制变量
 * 1，预约会议
 * 2，历史会议
 */
const meetingSwitchValue = ref<number>(1)
const selectedBuildingId = ref<string>('')
const selectedFloor = ref<string>('') // 添加楼层选择状态
const floorList = ref<string[]>([]) // 添加楼层列表状态
const searchKeyword = ref('')
const searchResults = ref([])
// 用户搜索结果
const searchUserResults = ref<{ userId: string, username: string, avatar: string, type: string }[]>([])

// 模态框中的搜索相关变量
const modalSearchKeyword = ref('')
const modalSearchResults = ref<{ userId: string, username: string, avatar: string, type: string }[]>([])

const infoBoxPosition = ref({ x: 0, y: 0 })
const showInfoBox = ref(false)
const { isMobile, isDesktop } = useDevice()
const currentInfo = ref({
  initiator: '',
  phone: '',
  department: '',
  start: '',
  end: ''
})
// 存储树形结构数据
const userTreeData = ref<any[]>([])
// 已选中的 `userid`（最终返回）
const selectedUsers = ref<Array<{ userid: string, name: string, avatar: string }>>(
  []
)

// 绑定到 `a-tree` 组件的 `checkedUserIds`
const checkedUserIds = ref<string[]>([])
const meetingRoomList = ref<{
  id: string
  name: string
  floor: string
  capacity: number
  imageUrl: string
}[]>([])
const customRuleDescription = ref('')
const route = useRoute()
const router = useRouter()
const userId
  = route.params.userId?.toString() || route.query.userId?.toString() || null
const meetingLoading = ref(false)
const meetingList = ref<IMeeting[]>([])
const noDataState = ref(false)
// 厂区数据
const factoryList = ref<{ id: string, name: string }[]>([])
const buildingList = ref<{ id: string, name: string }[]>([])
const showImageModal = ref(false) // 控制大图模态框的显示
const selectedImage = ref('') // 存储选择的图片 URL
const roomStatus = ref([]) // 用于存储会议室状态数据
const showRoomStatusModal = ref(false)
const currentUserId = ref(userId) // 确保已在作用域获取到userId

// 计算属性：获取当前选中厂区的名称
const selectedFactoryName = computed(() => {
  if (!selectedFactoryId.value || !factoryList.value.length) {
    return ''
  }
  const factory = factoryList.value.find((f) => f.id.toString() === selectedFactoryId.value.toString())
  return factory ? factory.name : selectedFactoryId.value
})

// 会议室预约相关变量
const showRoomBookingModal = ref(false)
const roomBookingActiveTab = ref('1') // 会议室预约弹窗当前标签页
const isRoomBookingSubmitting = ref(false) // 会议室预约提交状态
const roomBookingFormData = ref({
  subject: '',
  startTime: '',
  startDate: '',
  startTimeOfDay: '',
  endDate: '',
  endTimeOfDay: '',
  length: 60,
  durationType: '60',
  isCustomEndTime: false,
  mediaTypes: 'HDVideo',
  meetRoomId: undefined,
  meetType: 0, // 会议室预约默认为线下会议
  remindTime: '0',
  inviteScreen: 0, // 默认不邀请大屏
  serviceList: [],
  confConfigInfo: {
    isGuestFreePwd: false,
    callInRestriction: 0,
    guestPwd: '',
    enableWaitingRoom: false,
    enableSignIn: 0,
    enableSignOut: 0,
    signInBeforeMinutes: '',
    signOutMinutesAfterSignIn: '',
    signOutAfterEndMinutes: '',
    enableRecord: 0,
    enableLive: 0,
    livePassword: '',
    enableCloudRecord: 0
  }
})
const roomBookingSearchKeyword = ref('')
const roomBookingSearchResults = ref<{ userId: string, username: string, avatar: string, type: string }[]>([])
const roomBookingSelectedUsers = ref<Array<{ userid: string, name: string, avatar: string }>>([])
const showRoomBookingAllAttendeesModal = ref(false)
const roomBookingSelectedRoomName = ref('')
const showRoomBookingRoomSelectModal = ref(false)
const roomBookingMeetingRoomList = ref<{
  id: string
  name: string
  floor: string
  capacity: number
  imageUrl: string
}[]>([])
const roomBookingTempSelectedRoomId = ref<string | undefined>(undefined)
const roomBookingRecurrenceType = ref('none')
const showMobileRoomBookingPage = ref(false)
const showMobileRoomBookingSettingsModal = ref(false)
const showRoomBookingDurationModal = ref(false)
const showRoomBookingEndTimePicker = ref(false)
const showRoomBookingStartTimePicker = ref(false)
const roomBookingActiveStartPickerTab = ref('date')
const roomBookingStartDateYear = ref(new Date().getFullYear())
const roomBookingStartDateMonth = ref(new Date().getMonth() + 1)
const roomBookingStartDateDay = ref(new Date().getDate())
const roomBookingStartTimeHour = ref(new Date().getHours())
const roomBookingStartTimeMinute = ref(new Date().getMinutes())
const roomBookingCycleParams = ref({
  startDate: '',
  endDate: '',
  cycle: '',
  interval: 1,
  weekDay: [] as number[],
  point: [] as number[]
})

// 会议室预约表单验证
const isRoomBookingFormValid = computed(() => {
  return !!(
    roomBookingFormData.value.subject?.trim()
    && roomBookingFormData.value.startTime
    && roomBookingFormData.value.meetRoomId
  )
})
// 是否启用周期会议
const isRecurringMeeting = ref(false)
const isRoomBookingRecurringMeeting = ref(false)
const roomBookingInvalidDateWarning = ref(false)
const roomBookingServiceData = ref<Array<{
  serviceId: number
  serviceName: string
  responsiblePerson: string
  description: string
}>>([]) // 会议室预约服务数据

// 服务选择弹窗相关
const showRoomBookingServiceModal = ref(false)
const showRoomBookingOtherServiceModal = ref(false)
const roomBookingCurrentServiceIndex = ref(-1) // 当前正在编辑的服务索引
const roomBookingSelectedService = ref<any>(null) // 当前选中的服务
const roomBookingOtherServiceText = ref('') // 其他服务文本
// 周期会议参数
// 周期会议参数状态
// 周期会议参数状态
const cycleParams = ref({
  startDate: '',
  endDate: '',
  cycle: '',
  interval: 1,
  weekDay: [] as number[],
  point: [] as number[] // 添加point属性
})

// 用于标识是否存在无效日期的警告
const invalidDateWarning = ref(false)
// 选中的日期状态
const selectedDate = ref(dayjs().format('YYYY-MM-DD'))
// 会议表单数据
const formData = ref({
  subject: '',
  startTime: '',
  startDate: '',
  startTimeOfDay: '',
  length: 60, // 默认持续时间为60分钟
  durationType: '60', // 默认为1小时
  isCustomEndTime: false, // 是否使用自定义结束时间
  endDate: '', // 结束日期
  endTimeOfDay: '', // 结束时间
  mediaTypes: 'HDVideo', // 默认为HDVideo视频
  meetRoomId: undefined,
  meetType: 1, // 默认为云会议
  remindTime: '0', // 新增，会议提醒，单位分钟，字符类型，默认会议开始时
  inviteScreen: 1, // 新增字段，是否邀请大屏，0是不邀请，1是邀请
  serviceList: [], // 会议服务列表
  confConfigInfo: {
    isGuestFreePwd: false,
    callInRestriction: 0,
    guestPwd: '',
    enableWaitingRoom: false,
    enableSignOut: 0, // 是否启用会议签退，0关闭，1开启
    signInBeforeMinutes: '', // 会议开始前多少分钟可以签到
    signOutMinutesAfterSignIn: '', // 会议签到多少分钟后才能签退
    signOutAfterEndMinutes: '' // 会议结束多少分钟后不能签退
  },
  cycleParams: {
    startDate: '',
    endDate: '',
    cycle: '',
    interval: 1,
    weekDay: [],
    point: []
  },
  isOnline: true, // 默认为云会议
  isRecurring: false, // 是否为周期性会议
  _conferenceId: '', // 新增：编辑会议时的会议ID
  offlineParam: '' // 新增：线下会议专用参数
})

// 服务列表数据
const serveList = ref<any[]>([])
// 当前选择的服务
const selectedServices = ref<number[]>([])
// 服务相关的用户选择
const serviceUsers = ref<Record<string, any>>({})
// 每个服务的其他服务备注
const serviceRemarks = ref<Record<number, string>>({})
// 控制服务选择弹窗
const showServiceModal = ref(false)

// 获取服务列表API
const getServeList = async () => {
  try {
    const res = await http.post('/wecom/serveList')
    serveList.value = res.data || []
  } catch (error) {
    console.error('获取服务列表失败:', error)
    Message.error('获取服务列表失败')
  }
}

onMounted(() => {
  getServeList()
})

// 打开预约会议服务选择
const openScheduleMeetingServiceModal = () => {
  // 设置为预约会议模式
  isRoomBookingMode.value = false
  // 打开服务选择模态框
  showServiceModal.value = true
}

// 确认服务选择
const confirmServiceSelection = () => {
  // 如果是会议室预约模式，将选择的服务同步到会议室预约
  if (isRoomBookingMode.value) {
    // 将预约会议的服务选择同步到会议室预约服务数据
    roomBookingServiceData.value = selectedServices.value.map((serviceId) => {
      const service = serveList.value.find((s) => s.id === serviceId)
      return {
        serviceId,
        serviceName: service?.serviceInfo || '',
        responsiblePerson: service?.userName || '',
        description: serviceRemarks.value[serviceId] || ''
      }
    })
  }
  showServiceModal.value = false
}

// 取消服务选择
const cancelServiceSelection = () => {
  showServiceModal.value = false
}

// 添加/删除服务项
const addServiceItem = () => {
  formData.value.serviceList.push({ serviceIds: [], userIds: [], otherService: '' })
}
const removeServiceItem = (idx) => {
  formData.value.serviceList.splice(idx, 1)
}

// 格式化后的日期，用于显示
const formattedDate = computed(() =>
  dayjs(selectedDate.value).format('M月D日 dddd')
)
// 打开图片模态框
const openImageModal = (imageUrl) => {
  selectedImage.value = imageUrl // 设置要显示的大图 URL
  showImageModal.value = true // 显示模态框
}
/**
 * 取消会议事件
 * @param e 会议信息
 */
const EscMeeting = async (e: any) => {
  // 取消会议
  const res = await escMeeting(e.conferenceId)
  if (res.data.success === true) {
    Message.success('会议取消成功')
    // 重新查询会议列表
    fatchMeetingList()
  } else {
    Message.success('会议取消失败')
  }
}
/**
 * 复制链接按钮功能
 * @param e 会议信息
 */
const copyLink = (meeting) => {
  const url = `https://meeting.fortunesemic.com/joinUrl?conferenceId=${meeting.conferenceId}`
  navigator.clipboard.writeText(url).then(() => {
    Message.success('会议链接已复制')
  }).catch(() => {
    Message.error('复制失败，请手动复制')
  })
}

/**
 * 历史会议按钮事件
 */
const historyMettingChange = () => {
  meetingSwitchValue.value = 2
  fatchHistoryMeetingList()
}
// 辅助函数：根据 key 找到节点
// 筛选仅用户节点
function onCheck(checkedKeys) {
  const filteredKeys = checkedKeys.filter((key) => {
    const node = findNodeByKey(userTreeData, key)
    return node && node.type !== 'department' // 排除部门节点
  })
  checkedUserIds.value = filteredKeys
}

// 辅助函数：查找节点
function findNodeByKey(treeData, key) {
  for (const node of treeData) {
    if (node.key === key) {
      return node
    }
    if (node.children) {
      const found = findNodeByKey(node.children, key)
      if (found) {
        return found
      }
    }
  }
  return null
}
const fetchRoomStatus = async (date) => {
  try {
    if (!selectedBuildingId.value) return
    const response = await getRoomStatus(Number(selectedBuildingId.value))
    // 只保留与选定日期相关的占用时期
    const filteredData = response.map((room) => {
      const filteredPeriods = room.occupancyPeriods.filter((period) => {
        return dayjs(period.start).isSame(date, 'day')
      })
      return { ...room, occupancyPeriods: filteredPeriods }
    })
    roomStatus.value = filteredData
  } catch (error) {
    console.error('获取会议室状态失败:', error)
  }
}
watch(selectedDate, (newDate) => {
  fetchRoomStatus(newDate)
})
const closeRoomStatusModal = () => {
  showRoomStatusModal.value = false
}

// 在办公楼变化时调用此方法
watch(selectedBuildingId, (newBuildingId) => {
  if (newBuildingId) {
    fetchRoomStatus(newBuildingId)
  }
})
// 关闭图片模态框
const closeImageModal = () => {
  showImageModal.value = false // 隐藏模态框
}
const showInfo = (periods, slot, event) => {
  const info = periods.find(({ start, end }) => {
    const startOfDay = dayjs(selectedDate.value).startOf('day')
    const slotStart = startOfDay.add((slot - 1) * 15, 'minute')
    return (
      dayjs(start).isBefore(slotStart.add(15, 'minute'))
      && dayjs(end).isAfter(slotStart)
    )
  })

  if (info) {
    currentInfo.value = {
      initiator: info.initiator,
      phone: info.phone,
      department: info.department,
      start: dayjs(info.start).format('HH:mm'),
      end: dayjs(info.end).format('HH:mm')
    }
    // 设置位置为鼠标点击处的右下角偏移
    infoBoxPosition.value = { x: event.clientX + 10, y: event.clientY + 10 }
    showInfoBox.value = true
  }
}

const closeInfoBox = () => {
  showInfoBox.value = false
}
// ✅ 修改1：强制保留当前用户的选中状态
const removeUser = (index: number) => {
  const userToRemove = selectedUsers.value[index]
  if (selectedUsers.value[index].userid === userId) {
    return Message.error('您不能移除自己')
  }
  // 禁止移除自己且至少保留一个参会人
  if (userToRemove.userid === currentUserId.value) {
    return Message.error('您不能移除自己')
  }

  selectedUsers.value.splice(index, 1)
  checkedUserIds.value = checkedUserIds.value.filter(
    (id) => id !== userToRemove.userid
  )
}

// 处理周期类型变化
// 处理周期类型的变化
// 处理周期类型的变化
const onCycleChange = (value) => {
  cycleParams.value.cycle = value

  if (value === 'Day') {
    cycleParams.value.point = [] // 清空周期点
  } else if (value === 'Week') {
    cycleParams.value.point = [] // 重新设置为数组，以便用户选择周几
  } else if (value === 'Month') {
    cycleParams.value.point = [] // 设置为空数组，以便用户选择月份日期
  }
}

const openRoomStatusModal = async () => {
  await fetchRoomStatus(selectedDate.value)
  showRoomStatusModal.value = true
}
// 设置为今天的日期
const goToToday = () => {
  selectedDate.value = dayjs().format('YYYY-MM-DD')
}

// 前一天
const prevDay = () => {
  selectedDate.value = dayjs(selectedDate.value)
    .subtract(1, 'day')
    .format('YYYY-MM-DD')
}

// 后一天
const nextDay = () => {
  selectedDate.value = dayjs(selectedDate.value)
    .add(1, 'day')
    .format('YYYY-MM-DD')
}

// 切换周期会议状态
const toggleRecurringMeeting = () => {
  if (isRecurringMeeting.value) {
    // 如果启用了周期会议，自动设置开始日期为会议开始日期
    cycleParams.value.startDate = dayjs(formData.value.startTime).format('YYYY-MM-DD')
  } else {
    // 如果取消勾选，重置周期参数
    cycleParams.value = {
      startDate: '',
      endDate: '',
      cycle: '',
      interval: 1,
      weekDay: [],
      point: []
    }
  }
}

// 添加监听，当会议开始时间变化时更新循环开始日期
watch(() => formData.value.startTime, (newVal) => {
  if (isRecurringMeeting.value && newVal) {
    cycleParams.value.startDate = dayjs(newVal).format('YYYY-MM-DD')
  }
})

// ✅ 修改5：优化监听同步逻辑
watch(
  selectedUsers,
  (newUsers) => {
    // 确保自己始终在选中列表
    if (!newUsers.some((u) => u.userid === currentUserId.value)) {
      const self = userTreeData.value.find(
        (u) => u.userid === currentUserId.value
      )
      if (self) newUsers.unshift(self)
    }

    checkedUserIds.value = newUsers.filter(Boolean).map((user) => user.userid)
  },
  { deep: true, immediate: true }
)
watch([userTreeData], () => {
  if (
    checkedUserIds.value
    && userId
    && !checkedUserIds.value.includes(userId)
  ) {
    checkedUserIds.value = [...checkedUserIds.value, userId]
  }
})
watch(checkedUserIds, (newVal) => {
  if (userId && !newVal.includes(userId)) {
    checkedUserIds.value = [...newVal, userId]
  }
})
// 打开预约会议弹窗
const openScheduleMeetingModal = async () => {
  // 每次打开都重置为新建状态
  resetForm()
  isEditMode.value = false
  editConferenceId.value = ''
  // 自动带上自己
  if (userId && !selectedUsers.value.some((u) => u.userid === userId)) {
    const selfNode = findUserById(userTreeData.value, userId)
    if (selfNode) {
      selectedUsers.value.unshift({
        userid: userId,
        name: selfNode.title || '我',
        avatar: selfNode.avatar || ''
      })
    } else {
      selectedUsers.value.unshift({
        userid: userId,
        name: '我',
        avatar: ''
      })
    }
  }
  if (isMobile.value) {
    showMobileSchedulePage.value = true
    return
  }
  showScheduleMeetingModal.value = true
  if (factoryList.value.length === 0) {
    factoryList.value = [
      { id: '1', name: '线上会议' },
      { id: '0', name: '线下会议' }
    ]
  }
}

// 自定义时间禁用设置，使分钟只能选择每15分钟的时间
const disabledTime = () => {
  return {
    disabledHours: () => [],
    disabledMinutes: (hour) => {
      // 禁用非15的倍数的分钟
      return Array.from({ length: 60 }, (_, i) =>
        i % 15 !== 0 ? i : null).filter((i) => i !== null)
    }
  }
}
// 处理来宾密码变化
const handleGuestPwdChange = (value) => {
  if (value === true) {
    // 开启密码时，生成随机密码
    formData.value.confConfigInfo.guestPwd = Math.floor(
      100000 + Math.random() * 900000
    ).toString()
  } else {
    // 关闭密码时，清空密码
    formData.value.confConfigInfo.guestPwd = ''
  }
}
const isOccupied = (periods, slot, selectedDate) => {
  const startOfDay = dayjs(selectedDate).startOf('day')
  const slotStart = startOfDay.add((slot - 1) * 15, 'minute')
  const slotEnd = slotStart.add(15, 'minute') // 确保每个槽的结束时间正确

  return periods.some(({ start, end }) => {
    const periodStart = dayjs(start)
    const periodEnd = dayjs(end)
    return periodStart.isBefore(slotEnd) && periodEnd.isAfter(slotStart)
  })
}
const handleMeetingTypeChange = () => {
  if (formData.value.meetType === 1) {
    // 如果会议类型为线上，则清空线下相关选项
    selectedFactoryId.value = ''
    selectedBuildingId.value = ''
    formData.value.meetRoomId = undefined // 清空会议室选择

    // 清除会议地点时同时清除已选择的服务
    selectedServices.value = []
    serviceRemarks.value = {}
  }
}
// 获取厂区数据
const fetchFactories = async () => {
  try {
    const res = await getFactoryList()
    console.log('厂区接口返回：', res)
    factoryList.value = res || []
    console.log('厂区列表长度:', factoryList.value.length)
    console.log('当前选中厂区ID:', selectedFactoryId.value)

    // 如果有厂区数据且当前没有选中厂区，设置默认厂区为第一个
    if (factoryList.value.length > 0 && !selectedFactoryId.value) {
      // 查找ID为254的厂区，如果存在则设为默认，否则使用第一个
      const defaultFactory = factoryList.value.find((f) => f.id === '254') || factoryList.value[0]
      selectedFactoryId.value = defaultFactory.id.toString()
      console.log('设置默认厂区ID:', selectedFactoryId.value, '厂区名称:', defaultFactory.name)

      // 自动获取默认厂区的办公楼列表
      await onFactoryChange()
    }
  } catch (error) {
    console.error('获取厂区失败:', error)
    factoryList.value = []
  }
}

// 当厂区变化时，获取办公楼数据
const onFactoryChange = async () => {
  selectedBuildingId.value = ''
  selectedFloor.value = ''
  console.log('厂区变化，当前选中厂区ID:', selectedFactoryId.value)
  if (selectedFactoryId.value !== '' && selectedFactoryId.value !== undefined && selectedFactoryId.value !== null) {
    try {
      console.log('开始获取办公楼列表，厂区ID:', selectedFactoryId.value)
      buildingList.value = await getBuildingList(Number(selectedFactoryId.value))
      console.log('办公楼列表获取成功:', buildingList.value)
      await fetchMeetingRooms()
    } catch (error) {
      console.error('获取办公楼失败:', error)
      console.error('错误详情:', {
        factoryId: selectedFactoryId.value,
        error: error.message,
        stack: error.stack
      })
      Message.error('获取办公楼列表失败')
    }
  } else {
    console.log('厂区ID为空，清空办公楼列表')
    buildingList.value = []
    meetingRoomList.value = []
  }
}

// 当办公楼变化时，获取楼层数据
const onBuildingChange = async () => {
  selectedFloor.value = ''
  if (selectedBuildingId.value !== '' && selectedBuildingId.value !== undefined && selectedBuildingId.value !== null) {
    try {
      console.log('获取楼层数据，办公楼ID:', selectedBuildingId.value)
      const response = await getAvailableFloor(Number(selectedBuildingId.value))
      console.log('楼层数据响应:', response)

      if (response.code === '0' && response.success) {
        if (response.data && Array.isArray(response.data)) {
          floorList.value = response.data.map((item) => item.floor)
          console.log('楼层列表:', floorList.value)
          await fetchMeetingRooms()
        } else {
          console.warn('楼层数据格式异常:', response.data)
          floorList.value = []
          Message.info('该办公楼暂无楼层信息')
        }
      } else {
        console.error('获取楼层列表失败:', response)
        floorList.value = []
        Message.error('获取楼层列表失败')
      }
    } catch (error) {
      console.error('获取楼层列表异常:', error)
      floorList.value = []
      Message.error('获取楼层列表失败，请检查网络连接')
    }
  } else {
    floorList.value = []
    meetingRoomList.value = []
  }
}

// 当楼层变化时，获取会议室列表
const onFloorChange = async () => {
  await fetchMeetingRooms()
}

// 封装获取会议室列表的方法
const fetchMeetingRooms = async () => {
  // 根据当前模式选择正确的表单数据
  const currentFormData = isRoomBookingMode.value ? roomBookingFormData.value : formData.value

  if (!currentFormData.startTime || !currentFormData.length) {
    Message.warning('请先选择会议时间和时长')
    return
  }
  try {
    let startTime = currentFormData.startTime
    if (!startTime.includes(':') || startTime.split(':').length < 3) {
      const parts = startTime.split(' ')
      const timePart = parts[1]
      if (timePart) {
        startTime = `${parts[0]} ${timePart.includes(':') ? timePart : `${timePart}:00`}${timePart.split(':').length < 3 ? ':00' : ''}`
      }
    }

    console.log('获取会议室列表 - 当前模式:', isRoomBookingMode.value ? '会议室预约' : '预约会议')
    console.log('获取会议室列表参数:', {
      buildingId: selectedBuildingId.value,
      floor: selectedFloor.value,
      factoryId: selectedFactoryId.value,
      startTime,
      continuedTime: currentFormData.length
    })

    meetingRoomList.value = await getAvailableRooms({
      buildingId: selectedBuildingId.value ? Number(selectedBuildingId.value) : 0,
      floor: selectedFloor.value ? selectedFloor.value : '',
      factoryId: selectedFactoryId.value ? Number(selectedFactoryId.value) : 0,
      startTime,
      continuedTime: currentFormData.length
    })
  } catch (error) {
    Message.error('获取会议室列表失败')
    meetingRoomList.value = []
  }
}

// 监听会议时间和时长的变化，重新获取会议室列表
watch([() => formData.value.startTime, () => formData.value.length], async () => {
  if (!formData.value.startTime || !formData.value.length) {
    // 当时间或时长为空时，清空会议室列表
    meetingRoomList.value = []
    return
  }

  if (selectedFactoryId.value || selectedBuildingId.value || selectedFloor.value) {
    await fetchMeetingRooms()
  }
})

// 在表单中的开始时间和持续时间变化时，执行相关逻辑
watch(
  () => [formData.value.startTime, formData.value.length],
  ([newStartTime, newLength], [oldStartTime, oldLength]) => {
    if (
      formData.value.meetType === 0
      && (newStartTime !== oldStartTime || newLength !== oldLength)
    ) {
      onBuildingChange()
    }
  }
)
// 验证日期是否在二月份有效
// 验证日期是否在二月份有效
const validateDayForFebruary = (day) => {
  // 仅在选择了有效的开始日期后进行逻辑处理
  if (cycleParams.value.startDate) {
    const selectedMonth = new Date(cycleParams.value.startDate).getMonth() + 1 // 月份从0开始，所以需要加1

    // 检查是否为二月并且天数大于28
    if (selectedMonth === 2 && day > 28) {
      invalidDateWarning.value = true
    } else {
      invalidDateWarning.value = false // 日期有效
    }
  }
}
// 组件初始化时获取厂区数据
fetchFactories()
watch(
  () => formData.value.meetType,
  (newValue) => {
    console.log('会议类型变更:', newValue)
    console.log('会议类型变更:', formData.value.meetType)
  }
)
// 关闭预约会议弹窗
// 修改数据转换函数
const transformTreeData = (data: any[]): TreeNode[] => {
  return data.map((node) => {
    const isUser = node.type === 'user'
    const isDepartment = node.type === 'department'
    const isCurrentUser = isUser && node.userid === userId

    return {
      title: node.name,
      key: isUser ? node.userid : node.id.toString(),
      value: isUser ? node.userid : node.id.toString(),
      selectable: isUser && !isCurrentUser, // 用户可选中（自己除外）
      disabled: isDepartment || isCurrentUser, // 禁用部门和自己节点交互
      disableCheckbox: isDepartment, // 关键修改：仅对部门禁用复选框
      isLeaf: !node.children?.length,
      class: isDepartment ? 'department-node' : isUser ? 'user-node' : '',
      children: node.children ? transformTreeData(node.children) : [],
      avatar: isUser ? node.avatar : null
    }
  })
}
// TreeNode类型声明补充
interface TreeNode {
  title: string
  key: string
  value: string
  selectable: boolean
  disabled: boolean
  disableCheckbox: boolean
  isLeaf: boolean
  class: string
  children: TreeNode[]
  avatar: string | null
}
// 递归查找用户节点（根据 userid）
const findUserById = (tree: any[], userid: string): any | null => {
  for (const node of tree) {
    if (node.value === userid) return node
    if (node.children) {
      const found = findUserById(node.children, userid)
      if (found) return found
    }
  }
  return null
}
// 防抖搜索方法
// 添加用户搜索处理函数 - 主搜索框
const handleSearch = debounce(async (value) => {
  try {
    if (!value) {
      searchUserResults.value = []
      return
    }

    // 调用API进行搜索
    const res = await searchUsersAndDevices(value)

    // 过滤只保留用户类型的结果（type为1或type为'user'或无type）
    searchUserResults.value = res.filter((item) => item.type === 1 || item.type === 'user' || !item.type).map((user) => ({
      userId: user.userId || user.userid,
      username: user.username || user.name,
      avatar: user.avatar || '',
      type: 'user'
    }))
  } catch (error) {
    console.error('搜索用户失败:', error)
    Message.error('搜索用户失败')
    searchUserResults.value = []
  }
}, 300)

// 重置搜索功能 - 电脑端
const resetSearch = () => {
  form.keyword = ''
  fatchMeetingList()
}

// 手机端会议搜索功能
const handleMobileSearch = debounce((value) => {
  const params = { userId, keyword: value }
  meetingLoading.value = true
  getMeetingList(params)
    .then((res) => {
      meetingList.value = res.data
      noDataState.value = res.data.length == 0
      meetingLoading.value = false
    })
    .catch((_err) => {
      noDataState.value = true
      meetingLoading.value = false
      Message.error('搜索会议失败')
    })
}, 500)

// 重置搜索功能 - 手机端
const resetMobileSearch = () => {
  searchKeyword.value = ''
  handleMobileSearch('')
}

// 模态框中的搜索处理函数
const handleModalSearch = debounce(async (value) => {
  try {
    if (!value) {
      modalSearchResults.value = []
      return
    }

    // 调用API进行搜索
    const res = await searchUsersAndDevices(value)

    // 过滤只保留用户类型的结果
    modalSearchResults.value = res.filter((item) => item.type === 1 || item.type === 'user' || !item.type).map((user) => ({
      userId: user.userId || user.userid,
      username: user.username || user.name,
      avatar: user.avatar || '',
      type: 'user'
    }))
  } catch (error) {
    console.error('模态框搜索用户失败:', error)
    Message.error('搜索用户失败')
    modalSearchResults.value = []
  }
}, 300)

// 模态框中选择用户的处理函数 - 支持多选
const handleModalUserCheckChange = (userId, checked) => {
  if (!userId) return

  // 从搜索结果中找到选中的用户
  const selectedUser = modalSearchResults.value.find((user) => user.userId === userId)
  if (!selectedUser) return

  if (checked) {
    // 检查用户是否已经被选中
    const alreadyChecked = checkedUserIds.value.includes(selectedUser.userId)
    if (!alreadyChecked) {
      checkedUserIds.value.push(selectedUser.userId)
    }
  } else {
    // 取消选中用户（但排除当前用户）
    if (selectedUser.userId === currentUserId.value) {
      Message.warning('您不能移除自己')
      return
    }

    // 从已选中列表移除
    checkedUserIds.value = checkedUserIds.value.filter((id) => id !== selectedUser.userId)
  }
}

// 添加监听搜索关键词变化，触发搜索
watch(searchKeyword, (newValue) => {
  handleMobileSearch(newValue)
})

// 监听模态框搜索关键词变化
watch(modalSearchKeyword, (newValue) => {
  handleModalSearch(newValue)
})

// 处理选择用户的函数
const handleSelectUser = (userId) => {
  if (!userId) return

  // 从搜索结果中找到选中的用户
  const selectedUser = searchUserResults.value.find((user) => user.userId === userId)
  if (!selectedUser) return

  // 检查用户是否已经被选中
  const alreadySelected = selectedUsers.value.some((user) => user.userid === selectedUser.userId)
  if (alreadySelected) {
    Message.warning('该用户已在参会人列表中')
    return
  }

  // 添加用户到已选列表
  selectedUsers.value.push({
    userid: selectedUser.userId,
    name: selectedUser.username,
    avatar: selectedUser.avatar || ''
  })

  // 添加到checkedUserIds
  if (!checkedUserIds.value.includes(selectedUser.userId)) {
    checkedUserIds.value.push(selectedUser.userId)
  }

  // 清空搜索框和结果
  searchKeyword.value = ''
  searchUserResults.value = []
}
// 监听用户选择，点击 "确定" 时存入 `selectedUsers`
const handleInviteConfirm = () => {
  // 只保留 checkedUserIds 中的用户
  const newSelectedUsers = checkedUserIds.value
    .map((userid) => {
      // 从用户树中查找
      const userNode = findUserById(userTreeData.value, userid)
      if (userNode) {
        return {
          userid,
          name: userNode.title,
          avatar: userNode.avatar || ''
        }
      }
      return null
    })
    .filter(Boolean)

  // 确保当前用户始终在列表中
  if (userId && !newSelectedUsers.some((user) => user && user.userid === userId)) {
    const currentUser = (isRoomBookingMode.value ? roomBookingSelectedUsers.value : selectedUsers.value)
      .find((user) => user && user.userid === userId)
    if (currentUser) {
      newSelectedUsers.unshift(currentUser)
    }
  }

  // 根据模式更新对应的用户列表
  if (isRoomBookingMode.value) {
    // 会议室预约模式
    roomBookingSelectedUsers.value = newSelectedUsers.filter((u): u is { userid: string, name: string, avatar: string } => u !== null)
  } else {
    // 预约会议模式
    selectedUsers.value = newSelectedUsers.filter((u): u is { userid: string, name: string, avatar: string } => u !== null)
  }

  showInviteModal.value = false
}
// 获取用户树数据
// 获取用户树数据
const fetchUserTree = async () => {
  try {
    const rawData = await getUserTree()
    userTreeData.value = transformTreeData(rawData)

    // 确保在获取用户树后再添加用户信息
    if (userId) {
      const userNode = findUserById(userTreeData.value, userId)
      if (userNode) {
        selectedUsers.value.push({
          userid: userId,
          name: userNode.title || '当前用户',
          avatar: userNode.avatar || ''
        })
      }
    }
  } catch (error) {
    console.error('获取用户树失败:', error)
  }
}

const options: Options = {
  form: {
    rules: {
      keyword: [{ required: false, message: '' }]
    }
  },
  btns: { hide: true }
}
const { form } = useForm({
  keyword: ''
})
const columns = computed<Columns<typeof form>>(() => [
  {
    label: '',
    field: 'keyword',
    type: 'input',
    placeholder: '会议名称搜索',
    hide: false,
    span: 24
  }
])
/**
 * 获取会议列表
 */
const fatchMeetingList = debounce(() => {
  const params = { userId, ...form }
  meetingLoading.value = true
  getMeetingList(params)
    .then((res) => {
      meetingList.value = res.data
      noDataState.value = res.data.length == 0
      meetingLoading.value = false
    })
    .catch((err) => {
      noDataState.value = true
      meetingLoading.value = false

      // 根据错误类型显示不同的错误信息
      if (err?.response?.status === 401) {
        // 401错误，但由于我们修改了HTTP拦截器，这里应该不会执行到
        console.error('获取会议列表失败: 未授权', err)
      } else if (err?.message?.includes('注册')) {
        // 如果错误信息包含"注册"，显示注册相关的错误
        Message.error('您还未注册北京富创会议室预约平台，请下载~')
      } else {
        // 其他错误
        console.error('获取会议列表失败:', err)
        Message.error('获取会议列表失败，请稍后再试')
      }
    })
}, 500)

watch(form, (_newValue, _oldValue) => {
  fatchMeetingList()
})

const getDateValue = (value) => {
  const today = dayjs()
  const todayStr = today.format('YYYY-MM-DD')
  const tomorrow = today.add(1, 'day').format('YYYY-MM-DD')
  const dateStr = dayjs(value).format('YYYY-MM-DD')
  if (todayStr == dateStr) {
    return '今天'
  } else if (tomorrow == dateStr) {
    return '明天'
  } else {
    if (isMobile.value) {
      return dayjs(value).format('YYYY<br/>MM/DD')
    } else if (isDesktop.value) {
      return value
    }
  }
}
document.addEventListener(
  'touchmove',
  (e) => {
    e.passive = true
  },
  { capture: false, passive: true }
)
watch(selectedDate, (newDate) => {
  fetchRoomStatus(newDate)
})
const onStartTimeChange = (timeString) => {
  // 将时间字符串转换为dayjs对象
  const dateTime = dayjs(formData.value.startTime)
  // 更新开始时间，将秒数设置为00
  formData.value.startTime = dateTime
    .set('hour', dayjs(timeString).hour())
    .set('minute', dayjs(timeString).minute())
    .set('second', 0)
    .format('YYYY-MM-DD HH:mm:ss')
}
const getConferenceState = (value) => {
  switch (value) {
    case 0:
      return '待开始'
    case 1:
      return '正在开始'
    case 3:
      return '已结束'
    default:
      break
  }
}

const getParticipantStr = (participants) => {
  return participants
    .map((item) => {
      return item.realname
    })
    .join(', ')
}

const getTime = (time) => {
  // 格式化为"×月×日 周× HH:mm"
  const date = dayjs(time)
  const weekDayMap = ['日', '一', '二', '三', '四', '五', '六']
  const weekDay = weekDayMap[date.day()]

  // 检查是否是今天或明天
  const today = dayjs()
  const tomorrow = today.add(1, 'day')
  let extraInfo = ''

  if (date.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
    extraInfo = '(今天)'
  } else if (date.format('YYYY-MM-DD') === tomorrow.format('YYYY-MM-DD')) {
    extraInfo = '(明天)'
  }

  return `${date.month() + 1}月${date.date()}日 周${weekDay}${extraInfo} ${date.format('HH:mm')}`
}

const toUrl = (conferenceId) => {
  // 直接使用会议ID构造URL
  const newUrl = `https://meeting.fortunesemic.com/joinUrl?conferenceId=${conferenceId}`
  window.open(newUrl)
}
const disabledDate = (current) => {
  // 禁用当前时间之前的所有日期
  return current && current < dayjs().startOf('day') // 禁用今天之前的日期
}
const onStartApp = () => {
  window.location.href = 'http://1.94.243.106:5173/appawake.html'
}
// 重置表单
const resetForm = () => {
  formData.value = {
    subject: '',
    startTime: '',
    startDate: '',
    startTimeOfDay: '',
    length: 60,
    durationType: '60',
    isCustomEndTime: false,
    endDate: '', // 重置结束日期
    endTimeOfDay: '', // 重置结束时间
    mediaTypes: 'HDVideo', // 默认选择视频
    meetRoomId: undefined,
    meetType: 1, // 默认为云会议
    remindTime: '0', // 新增，重置提醒
    inviteScreen: 1, // 新增，重置邀请大屏，默认邀请
    serviceList: [], // 重置会议服务列表
    confConfigInfo: {
      isGuestFreePwd: false,
      callInRestriction: 0,
      guestPwd: '',
      enableWaitingRoom: false,
      enableSignOut: 0, // 是否启用会议签退，0关闭，1开启
      signInBeforeMinutes: '', // 会议开始前多少分钟可以签到
      signOutMinutesAfterSignIn: '', // 会议签到多少分钟后才能签退
      signOutAfterEndMinutes: '' // 会议结束多少分钟后不能签退
    },
    cycleParams: {
      startDate: '',
      endDate: '',
      cycle: '',
      interval: 1,
      point: [],
      weekDay: [] // 添加weekDay属性以符合类型要求
    },
    isOnline: true,
    isRecurring: false,
    _conferenceId: '', // 新增：编辑会议时的会议ID
    offlineParam: '' // 新增：线下会议专用参数
  }

  // 设置初始日期时间为当前时间的下一个整点
  const now = dayjs()
  const nextHour = now.add(1, 'hour').startOf('hour')

  formData.value.startDate = nextHour.format('YYYY-MM-DD')
  formData.value.startTimeOfDay = nextHour.format('HH:mm')

  // 更新完整的开始时间
  updateStartTimeFromDateAndTime()

  // 重置参会人和其他字段
  selectedUsers.value = []

  // 重置服务相关数据
  selectedServices.value = []
  serviceRemarks.value = {}

  // 重置周期会议相关字段
  isRecurringMeeting.value = false
  recurrenceType.value = 'none'
  showCustomRecurrenceModal.value = false // 重置自定义周期会议设置模态框状态
  cycleParams.value = {
    startDate: '',
    endDate: '',
    cycle: '',
    interval: 1,
    point: [],
    weekDay: [] // 添加weekDay属性以符合类型要求
  }

  // 如果是线下会议，重置厂区和会议室选择
  if (!formData.value.isOnline) {
    selectedFactoryId.value = ''
    selectedBuildingId.value = ''
    formData.value.meetRoomId = undefined // 清空会议室选择
  }
  selectedRoomName.value = ''
  tempSelectedRoomId.value = undefined
}
// 提交预约会议
const onScheduleMeetingSubmit = async () => {
  if (!selectedUsers.value.length) {
    return Message.error('请选择与会者！')
  }

  if (!formData.value.subject) {
    return Message.error('请输入会议主题！')
  }

  if (!formData.value.startTime) {
    return Message.error('请选择会议开始时间！')
  }

  // 检查开始时间是否在当前时间之前
  const now = dayjs()
  const startTime = dayjs(formData.value.startTime)
  if (startTime.isBefore(now)) {
    return Message.error('会议开始时间不能早于当前时间！')
  }

  // 检查是否已选择会议室
  const isOfflineMeeting = formData.value.meetRoomId !== undefined

  // 自动设置会议类型
  formData.value.meetType = isOfflineMeeting ? 0 : 1

  if (isOfflineMeeting && !formData.value.meetRoomId) {
    return Message.error('请选择会议室！')
  }

  if (!formData.value.length) {
    return Message.error('请输入会议持续时间！')
  }

  // 验证会议时长是否在有效范围内
  if (formData.value.length < 15) {
    return Message.error('会议时长不能少于15分钟！')
  }

  if (formData.value.length > 1440) {
    return Message.error('会议时长不能超过24小时(1440分钟)！')
  }

  if (!userId) {
    return Message.error('用户 ID 不能为空！')
  }

  // 验证周期会议参数
  if (recurrenceType.value !== 'none') {
    if (!cycleParams.value.endDate) {
      return Message.error('请选择循环结束日期！')
    }

    if (cycleParams.value.cycle === 'Week' && cycleParams.value.point.length === 0) {
      return Message.error('请选择循环的周几！')
    }

    if (cycleParams.value.cycle === 'Month' && cycleParams.value.point.length === 0) {
      return Message.error('请选择循环的日期！')
    }

    if (!cycleParams.value.interval) {
      return Message.error('请输入间隔周期！')
    }
  }

  // 会议冲突检测参数
  const conflictParams = {
    startTime: formData.value.startTime,
    continuedTime: formData.value.length,
    meetingRoomId: formData.value.meetRoomId ? Number(formData.value.meetRoomId) : undefined,
    conferenceId: isEditMode.value ? formData.value._conferenceId : undefined,
    meetType: formData.value.meetType,
    circleType: recurrenceType.value !== 'none' ? 1 : 0,
    cycle: recurrenceType.value !== 'none' ? cycleParams.value.cycle : undefined,
    cycleEndDate: recurrenceType.value !== 'none' ? cycleParams.value.endDate : undefined,
    interval: recurrenceType.value !== 'none' ? cycleParams.value.interval : undefined,
    point: recurrenceType.value !== 'none' ? cycleParams.value.point : undefined
  }

  // 调用冲突检测接口
  try {
    const conflictRes = await meetConflict(conflictParams)
    if (!(conflictRes.code === 0 || conflictRes.code === '0')) {
      Message.error(conflictRes.msg || '会议时间冲突，请调整时间')
      return
    }
  } catch (e) {
    Message.error('会议冲突检测失败，请重试')
    return
  }

  const requestData = {
    userId, // ✅ 取自 URL
    subject: formData.value.subject,
    startTime: formData.value.startTime,
    length: formData.value.length,
    mediaTypes: formData.value.mediaTypes || 'HDVideo', // ✅ 默认 `HDVideo`
    meetRoomId: formData.value.meetRoomId,
    meetType: formData.value.meetType,
    remindTime: formData.value.remindTime, // 新增提醒参数
    // 只在新建会议时才包含邀请大屏参数
    ...(!isEditMode.value ? { inviteScreen: formData.value.inviteScreen } : {}),
    // 补全签到相关参数
    enableSignOut: formData.value.confConfigInfo?.enableSignOut || 0,
    signInBeforeMinutes: formData.value.confConfigInfo?.signInBeforeMinutes || '',
    signOutMinutesAfterSignIn: formData.value.confConfigInfo?.signOutMinutesAfterSignIn || '',
    signOutAfterEndMinutes: formData.value.confConfigInfo?.signOutAfterEndMinutes || '',

    // ✅ 会议配置信息
    confConfigInfo: {
      isGuestFreePwd: !formData.value.confConfigInfo.isGuestFreePwd,
      callInRestriction: formData.value.confConfigInfo?.callInRestriction || 0,
      guestPwd: formData.value.confConfigInfo?.guestPwd || '',
      enableWaitingRoom:
        formData.value.confConfigInfo?.enableWaitingRoom || false
    },
    // ✅ 如果是循环会议才提交 `cycleParams`
    cycleParams: recurrenceType.value !== 'none'
      ? {
          startDate: cycleParams.value.startDate,
          endDate: cycleParams.value.endDate,
          cycle: cycleParams.value.cycle,
          interval: cycleParams.value.interval,
          point: cycleParams.value.cycle === 'Week' ? cycleParams.value.point.map((d) => d % 7) : cycleParams.value.point
        }
      : undefined,
    // ✅ 与会者列表
    attendees: selectedUsers.value.map((user) => ({
      accountId: user.userid,
      appId: '9dbd6b334e744eada42b45b3bf6b8402'
    })),
    // 只有新建会议时才传递 serviceList，编辑会议不包含会议服务
    ...(!isEditMode.value && selectedServices.value.length > 0
      ? {
          serviceList: selectedServices.value.map((serviceId) => {
            const service = serveList.value.find((s) => s.id === serviceId)
            return {
              serviceIds: [serviceId],
              userIds: service && service.userId ? [service.userId] : [], // 负责人userId
              otherService: serviceRemarks.value[serviceId] || ''
            }
          })
        }
      : {}),
    ...(isEditMode.value ? { conferenceId: formData.value._conferenceId } : {})
  }

  console.log('提交预约会议请求:', requestData)

  try {
    if (isEditMode.value) {
      await updateMeeting(requestData)
      Message.success('会议编辑成功！')
    } else {
      await scheduleMeeting(requestData)
      Message.success('会议预约成功！')
    }
    resetForm()
    fetchUserTree()
    showScheduleMeetingModal.value = false
    showMobileSchedulePage.value = false // 关闭移动端预约弹窗
    showMobileEditPage.value = false // 关闭移动端编辑弹窗
    isEditMode.value = false
    editConferenceId.value = ''
    await fatchMeetingList()
  } catch (error) {
    Message.error(isEditMode.value ? '编辑会议失败，请重试！' : '预约会议失败，请重试！')
    console.error(isEditMode.value ? '编辑会议失败:' : '预约会议失败:', error)
  }
}

// 处理表单的关闭
const closeScheduleMeetingModal = () => {
  resetForm()
  fetchUserTree()
  showScheduleMeetingModal.value = false
  isEditMode.value = false
  editConferenceId.value = ''
}
/**
 * 获取历史会议列表
 */
const fatchHistoryMeetingList = async () => {
  meetingLoading.value = true
  const res = await getHistoryMeetingList(userId)
  // 对获取到的数据进行反向排序
  historyMeetingList.value = res.data.reverse()
  // 设置是否显示无数据状态
  noDataState.value = res.data.length === 0
  meetingLoading.value = false
}
/**
 * 历史会议返回按钮事件
 */
const backAppointment = () => {
  meetingSwitchValue.value = 1
  fatchMeetingList() // 返回后重新查询预约会议列表
}

onMounted(async () => {
  fatchMeetingList()
  await fetchUserTree()
  selectedDate.value = dayjs().format('YYYY-MM-DD') // 初始化当天的日期
  if (selectedBuildingId.value) {
    fetchRoomStatus(selectedDate.value)
  }
  // 自动添加自己到参会列表
  if (
    currentUserId.value
    && !selectedUsers.value.some((u: any) => u.userid === currentUserId.value)
  ) {
    const selfNode = findUserById(userTreeData.value, currentUserId.value)
    if (selfNode) {
      selectedUsers.value.push({
        userid: currentUserId.value,
        name: selfNode.title,
        avatar: selfNode.avatar || ''
      })
      checkedUserIds.value.push(currentUserId.value)
    }
  }
  document.title = '富创云会议'
})

// 处理会议类型选择
const handleMeetingTypeSelect = (isOnline: boolean) => {
  formData.value.meetType = isOnline ? 1 : 0
  if (!isOnline) {
    // 选择现场会议时，重置厂区和办公楼选择
    selectedFactoryId.value = ''
    selectedBuildingId.value = ''
    formData.value.meetRoomId = undefined
  }
}

// 处理会议室选择
const handleRoomSelect = (room: any) => {
  formData.value.roomId = room.id
  formData.value.roomName = room.name
  showRoomSelectModal.value = false
}

const formatStartDate = computed(() => {
  return dayjs(formData.value.startTime).format('YYYY-MM-DD')
})

const goToMeetRoomState = () => {
  // 跳转到会议室占用情况页面
  window.open('https://meeting.fortunesemic.com/meetRoomState', '_blank')
}

// 会议室预约相关函数
const openRoomBookingModal = () => {
  if (isMobile.value) {
    showMobileRoomBookingPage.value = true
  } else {
    showRoomBookingModal.value = true
  }
  // 初始化表单数据
  resetRoomBookingFormData()
  // 重置标签页
  roomBookingActiveTab.value = '1'

  // 使用nextTick确保DOM更新后再设置时间
  nextTick(() => {
    // 设置默认时间（现在之后的取整五分钟开始，30分钟结束）
    setDefaultRoomBookingTime()
    // 设置默认时间后自动获取会议室列表
    fetchRoomBookingMeetingRooms()
  })

  // 自动设置预约人（与预约会议保持一致的逻辑）
  if (userId && !roomBookingSelectedUsers.value.some((u) => u.userid === userId)) {
    const selfNode = findUserById(userTreeData.value, userId)
    if (selfNode) {
      roomBookingSelectedUsers.value.unshift({
        userid: userId,
        name: selfNode.title || '我',
        avatar: selfNode.avatar || ''
      })
    } else {
      // 备用方案：如果userTreeData中找不到，使用userStore的信息
      const userName = userStore.userInfo?.realname || '我'
      const userAvatar = userStore.userInfo?.avatar || ''
      roomBookingSelectedUsers.value.unshift({
        userid: userId,
        name: userName,
        avatar: userAvatar
      })
    }
  }
}

// 清除会议室预约的会议室选择
const clearRoomBookingRoomSelection = () => {
  roomBookingSelectedRoomName.value = ''
  roomBookingFormData.value.meetRoomId = undefined
}

// 打开会议室预约的用户选择器
const openRoomBookingUserSelector = () => {
  // 设置为会议室预约模式
  isRoomBookingMode.value = true

  if (isMobile.value) {
    // 移动端使用移动端选择器
    tempSelectedUsers.value = [...roomBookingSelectedUsers.value]
    tempCheckedUserIds.value = tempSelectedUsers.value.map((u) => u.userid)
    showMobileUserSelector.value = true
  } else {
    // PC端使用模态框选择器
    // 清空搜索条件，避免上一次搜索结果影响
    modalSearchKeyword.value = ''
    modalSearchResults.value = []

    // 同步 checkedUserIds 为当前 roomBookingSelectedUsers
    checkedUserIds.value = roomBookingSelectedUsers.value.map((user) => user.userid)

    // 显示邀请弹窗
    showInviteModal.value = true
  }
}

// 设置默认时间
const setDefaultRoomBookingTime = () => {
  const now = dayjs()
  // 取整到下一个5分钟
  const currentMinute = now.minute()
  const minutesToAdd = currentMinute % 5 === 0 ? 5 : 5 - (currentMinute % 5)
  const startTime = now.add(minutesToAdd, 'minute').second(0).millisecond(0)

  // 结束时间为开始时间后30分钟
  const endTime = startTime.add(30, 'minute')

  // 设置开始时间 - 为手机端显示添加分离的日期和时间字段
  roomBookingFormData.value.startDate = startTime.format('YYYY-MM-DD HH:mm')
  roomBookingFormData.value.startTime = startTime.format('YYYY-MM-DD HH:mm:ss')
  // 手机端显示需要的分离字段
  roomBookingFormData.value.startTimeOfDay = startTime.format('HH:mm:ss')

  // 设置结束时间
  roomBookingFormData.value.endDate = endTime.format('YYYY-MM-DD HH:mm')
  // 手机端显示需要的分离字段
  roomBookingFormData.value.endTimeOfDay = endTime.format('HH:mm:ss')

  // 设置时长为30分钟
  roomBookingFormData.value.length = 30
  roomBookingFormData.value.durationType = '30'
}

// 更新会议室预约的完整开始时间
const updateRoomBookingStartTime = () => {
  if (roomBookingFormData.value.startDate && roomBookingFormData.value.startTimeOfDay) {
    const dateStr = roomBookingFormData.value.startDate
    const timeStr = roomBookingFormData.value.startTimeOfDay

    console.log('更新开始时间:', { dateStr, timeStr })

    // 合并日期和时间
    let newDateTime = `${dateStr} ${timeStr}`
    if (!timeStr.includes(':') || timeStr.split(':').length < 3) {
      // 如果时间不包含秒，添加秒
      newDateTime = `${dateStr} ${timeStr.includes(':') ? timeStr : `${timeStr}:00`}${timeStr.split(':').length < 3 ? ':00' : ''}`
    }

    console.log('合并后的时间:', newDateTime)
    roomBookingFormData.value.startTime = newDateTime
  }
}

const closeMobileRoomBookingPage = () => {
  showMobileRoomBookingPage.value = false
  resetRoomBookingFormData()
}

const resetRoomBookingFormData = () => {
  roomBookingFormData.value = {
    subject: '',
    startTime: '',
    startDate: '',
    startTimeOfDay: '',
    endDate: '',
    endTimeOfDay: '',
    length: 30,
    durationType: '30',
    isCustomEndTime: false,
    mediaTypes: 'HDVideo',
    meetRoomId: undefined,
    meetType: 0, // 会议室预约默认为线下会议
    remindTime: '0',
    inviteScreen: 0, // 默认不邀请大屏
    serviceList: [],
    confConfigInfo: {
      isGuestFreePwd: false,
      callInRestriction: 0,
      guestPwd: '',
      enableWaitingRoom: false,
      enableSignIn: 0,
      enableSignOut: 0,
      signInBeforeMinutes: '',
      signOutMinutesAfterSignIn: '',
      signOutAfterEndMinutes: '',
      enableRecord: 0,
      enableLive: 0,
      livePassword: '',
      enableCloudRecord: 0
    }
  }
  roomBookingSelectedUsers.value = []
  roomBookingSelectedRoomName.value = ''
  roomBookingRecurrenceType.value = 'none'
  roomBookingServiceData.value = []
  roomBookingCycleParams.value = {
    startDate: '',
    endDate: '',
    cycle: '',
    interval: 1,
    weekDay: [],
    point: []
  }

  // 重置厂区、办公楼、楼层选择，但保持默认厂区
  selectedBuildingId.value = ''
  selectedFloor.value = ''
  // 如果有厂区数据且当前没有选中厂区，设置默认厂区
  if (factoryList.value.length > 0 && !selectedFactoryId.value) {
    const defaultFactory = factoryList.value.find((f) => f.id === '254') || factoryList.value[0]
    selectedFactoryId.value = defaultFactory.id.toString()
  }
}

const handleRoomBookingSearch = async (keyword: string) => {
  if (!keyword.trim()) {
    roomBookingSearchResults.value = []
    return
  }

  try {
    const response = await searchUsersAndDevices(keyword)
    if (response && response.data) {
      roomBookingSearchResults.value = response.data.map((item: any) => ({
        userId: item.userid || item.id,
        username: item.realname || item.username || item.name,
        avatar: item.avatar || '',
        type: 'user'
      }))
    }
  } catch (error) {
    console.error('搜索用户失败:', error)
    roomBookingSearchResults.value = []
  }
}

const handleRoomBookingSelectUser = (userId: string) => {
  const user = roomBookingSearchResults.value.find((u) => u.userId === userId)
  if (user && !roomBookingSelectedUsers.value.find((u) => u.userid === userId)) {
    roomBookingSelectedUsers.value.push({
      userid: userId,
      name: user.username,
      avatar: user.avatar
    })
  }
  roomBookingSearchKeyword.value = ''
  roomBookingSearchResults.value = []
}

const removeRoomBookingAttendee = (userId: string) => {
  roomBookingSelectedUsers.value = roomBookingSelectedUsers.value.filter((user) => user.userid !== userId)
}

const onRoomBookingDateChange = (date: any) => {
  console.log('日期变更:', date, typeof date)

  // 会议室预约使用单个日期时间选择器，直接设置startTime
  if (roomBookingFormData.value.startDate) {
    // 确保时间格式正确，添加秒数
    let startTime = roomBookingFormData.value.startDate
    if (startTime && !startTime.includes(':')) {
      startTime = `${startTime} 00:00:00`
    } else if (startTime && startTime.split(':').length === 2) {
      startTime = `${startTime}:00`
    }
    roomBookingFormData.value.startTime = startTime
  }

  // 如果已有结束时间，验证时间间隔
  if (roomBookingFormData.value.endDate) {
    calculateRoomBookingDurationFromEndTime()
  }

  // 时间变化时自动获取会议室列表
  if (roomBookingFormData.value.startDate) {
    fetchRoomBookingMeetingRooms()
  }
}

const onRoomBookingTimeChange = (time: any) => {
  console.log('时间变更:', time, typeof time)
  updateRoomBookingStartTime()

  // 如果已有结束时间，验证时间间隔
  if (roomBookingFormData.value.endDate) {
    calculateRoomBookingDurationFromEndTime()
  }

  // 时间变化时自动获取会议室列表
  if (roomBookingFormData.value.startDate) {
    fetchRoomBookingMeetingRooms()
  }
}

const handleRoomBookingDurationChange = (value: string) => {
  if (value === 'custom') {
    roomBookingFormData.value.isCustomEndTime = true
    roomBookingFormData.value.durationType = 'custom'
  } else {
    roomBookingFormData.value.isCustomEndTime = false
    roomBookingFormData.value.durationType = value
    let duration = Number.parseInt(value)

    // 自动调整时长：小于15分钟重置为15分钟，大于24小时重置为24小时
    if (duration < 15) {
      duration = 15
      Message.info('会议时长不能少于15分钟，已自动调整为15分钟')
    } else if (duration > 24 * 60) {
      duration = 24 * 60 // 24小时 = 1440分钟
      Message.info('会议时长不能超过24小时，已自动调整为24小时')
    }

    roomBookingFormData.value.length = duration
    // 时长调整后自动获取会议室列表
    fetchRoomBookingMeetingRooms()
  }
}

const calculateRoomBookingDurationFromEndTime = () => {
  if (roomBookingFormData.value.startDate && roomBookingFormData.value.endDate) {
    const startMoment = dayjs(roomBookingFormData.value.startDate)
    const endMoment = dayjs(roomBookingFormData.value.endDate)
    let duration = endMoment.diff(startMoment, 'minute')
    const durationHours = endMoment.diff(startMoment, 'hour', true)

    if (duration > 0) {
      let needsAdjustment = false
      let newEndTime = endMoment

      // 自动调整时长：小于15分钟重置为15分钟，大于24小时重置为24小时
      if (duration < 15) {
        duration = 15
        newEndTime = startMoment.add(15, 'minute')
        needsAdjustment = true
        Message.info('会议时长不能少于15分钟，已自动调整为15分钟')
      } else if (durationHours > 24) {
        duration = 24 * 60 // 24小时 = 1440分钟
        newEndTime = startMoment.add(24, 'hour')
        needsAdjustment = true
        Message.info('会议时长不能超过24小时，已自动调整为24小时')
      }

      // 如果需要调整，更新结束时间
      if (needsAdjustment) {
        roomBookingFormData.value.endDate = newEndTime.format('YYYY-MM-DD HH:mm')
      }

      roomBookingFormData.value.length = duration
      // 更新时长类型显示
      if (duration === 15) {
        roomBookingFormData.value.durationType = '15'
      } else if (duration === 30) {
        roomBookingFormData.value.durationType = '30'
      } else if (duration === 60) {
        roomBookingFormData.value.durationType = '60'
      } else if (duration === 120) {
        roomBookingFormData.value.durationType = '120'
      } else if (duration === 180) {
        roomBookingFormData.value.durationType = '180'
      } else if (duration === 1440) {
        roomBookingFormData.value.durationType = '1440'
      } else {
        roomBookingFormData.value.durationType = 'custom'
      }

      // 时间间隔调整后自动获取会议室列表
      fetchRoomBookingMeetingRooms()
    } else if (duration <= 0) {
      // 开始时间大于或等于结束时间，自动重置结束时间为开始时间后30分钟
      const newEndTime = startMoment.add(30, 'minute')
      roomBookingFormData.value.endDate = newEndTime.format('YYYY-MM-DD HH:mm')
      roomBookingFormData.value.length = 30
      roomBookingFormData.value.durationType = '30'
      Message.info('结束时间不能早于或等于开始时间，已自动调整为开始时间后30分钟')

      // 时间重置后也要刷新会议室列表
      fetchRoomBookingMeetingRooms()
    }
  }
}

const onRoomBookingLocationInputClick = async () => {
  // 设置标识，表示这是会议室预约的选择
  isRoomBookingMode.value = true
  // 使用与预约会议相同的会议室选择模态框
  showRoomSelectModal.value = true
  await fetchMeetingRooms()
}

// 添加防抖变量
let roomBookingFetchTimer: NodeJS.Timeout | null = null

const fetchRoomBookingMeetingRooms = async () => {
  // 清除之前的定时器，实现防抖
  if (roomBookingFetchTimer) {
    clearTimeout(roomBookingFetchTimer)
  }

  roomBookingFetchTimer = setTimeout(async () => {
    // 只需要开始时间和时长即可获取会议室列表
    if (!roomBookingFormData.value.startDate || !roomBookingFormData.value.length) {
      console.log('缺少必要参数，跳过获取会议室列表')
      return
    }

    try {
      // 确保时间格式正确，API需要 YYYY-MM-DD HH:mm:ss 格式
      let startTime = roomBookingFormData.value.startDate
      if (startTime && !startTime.includes(':')) {
        // 如果没有时间部分，添加默认时间
        startTime = `${startTime} 00:00:00`
      } else if (startTime && startTime.split(':').length === 2) {
        // 如果时间格式是 YYYY-MM-DD HH:mm，添加秒
        startTime = `${startTime}:00`
      }

      const params = {
        factoryId: selectedFactoryId.value ? Number(selectedFactoryId.value) : 0,
        buildingId: selectedBuildingId.value ? Number(selectedBuildingId.value) : 0,
        floor: selectedFloor.value || '',
        startTime,
        continuedTime: roomBookingFormData.value.length
      }

      console.log('获取会议室列表参数:', params)

      // 调用API获取可用会议室，厂区办公楼楼层参数可选
      const response = await getAvailableRooms(params)

      console.log('会议室列表响应:', response)

      // 确保响应数据格式正确
      if (Array.isArray(response)) {
        meetingRoomList.value = response
        if (response.length === 0) {
          Message.info('该时间段暂无可用会议室')
        }
      } else if (response && Array.isArray(response.data)) {
        meetingRoomList.value = response.data
        if (response.data.length === 0) {
          Message.info('该时间段暂无可用会议室')
        }
      } else {
        console.warn('API响应格式异常:', response)
        meetingRoomList.value = []
        Message.info('该时间段暂无可用会议室')
      }
    } catch (error) {
      console.error('获取会议室列表失败:', error)
      console.error('错误详情:', {
        message: error.message,
        stack: error.stack,
        response: error.response
      })
      Message.error('获取会议室列表失败，请检查网络连接或稍后重试')
      meetingRoomList.value = []
    }
  }, 300) // 300ms 防抖延迟
}

const selectRoomBookingRoom = (roomId: string) => {
  // 直接设置选中的会议室ID，实现即时选中效果
  roomBookingFormData.value.meetRoomId = roomId
  // 同时更新会议室名称
  const selectedRoom = meetingRoomList.value.find((room) => room.id === roomId)
  if (selectedRoom) {
    roomBookingSelectedRoomName.value = selectedRoom.name
  }
}

const confirmRoomBookingRoomSelection = () => {
  showRoomBookingRoomSelectModal.value = false
  roomBookingFormData.value.meetRoomId = roomBookingTempSelectedRoomId.value
  roomBookingSelectedRoomName.value = roomBookingMeetingRoomList.value.find((room) => room.id === roomBookingTempSelectedRoomId.value)?.name || ''
}

const cancelRoomBookingRoomSelection = () => {
  showRoomBookingRoomSelectModal.value = false
  roomBookingTempSelectedRoomId.value = undefined
}

// 会议室预约 - 选择厂区
const selectFactory = async (factoryId: string) => {
  selectedFactoryId.value = factoryId
  selectedBuildingId.value = ''
  selectedFloor.value = ''
  roomBookingMeetingRoomList.value = []

  if (factoryId) {
    try {
      buildingList.value = await getBuildingList(Number(factoryId))
    } catch (error) {
      console.error('获取办公楼失败:', error)
      Message.error('获取办公楼列表失败')
    }
  } else {
    buildingList.value = []
  }
}

// 会议室预约 - 选择办公楼
const selectBuilding = async (buildingId: string) => {
  selectedBuildingId.value = buildingId
  selectedFloor.value = ''
  roomBookingMeetingRoomList.value = []

  if (buildingId) {
    try {
      console.log('会议室预约-获取楼层数据，办公楼ID:', buildingId)
      const response = await getAvailableFloor(Number(buildingId))
      console.log('会议室预约-楼层数据响应:', response)

      if (response.code === '0' && response.success) {
        if (response.data && Array.isArray(response.data)) {
          floorList.value = response.data.map((item) => item.floor)
          console.log('会议室预约-楼层列表:', floorList.value)
          // 自动获取会议室列表
          await fetchRoomBookingMeetingRooms()
        } else {
          console.warn('会议室预约-楼层数据格式异常:', response.data)
          floorList.value = []
          Message.info('该办公楼暂无楼层信息')
        }
      } else {
        console.error('会议室预约-获取楼层列表失败:', response)
        floorList.value = []
        Message.error('获取楼层列表失败')
      }
    } catch (error) {
      console.error('会议室预约-获取楼层失败:', error)
      floorList.value = []
      Message.error('获取楼层列表失败，请检查网络连接')
    }
  } else {
    floorList.value = []
  }
}

const handleRoomBookingRecurrenceTypeChange = (value: string) => {
  // 根据选择的重复类型设置循环参数
  if (value === 'none') {
    // 重置周期参数
    roomBookingCycleParams.value = {
      startDate: roomBookingFormData.value.startDate,
      endDate: '',
      cycle: '',
      interval: 1,
      weekDay: [],
      point: []
    }
  } else if (value === 'custom') {
    // 自定义模式，设置默认值但由用户自行调整
    roomBookingCycleParams.value.startDate = roomBookingFormData.value.startDate

    if (!roomBookingCycleParams.value.cycle) {
      roomBookingCycleParams.value.cycle = 'Day'
      roomBookingCycleParams.value.interval = 1
      roomBookingCycleParams.value.point = []
      roomBookingCycleParams.value.weekDay = []
    }

    // 设置会议室预约模式标识
    isRoomBookingMode.value = true
    // 将会议室预约的参数同步到cycleParams，供自定义设置模态框使用
    cycleParams.value = { ...roomBookingCycleParams.value }

    // 显示自定义周期会议设置模态框
    showCustomRecurrenceModal.value = true
  } else if (value === 'custom-rule') {
    // 已经设置了自定义规则，不需要重新设置参数
    // 如果没有结束日期，则提示用户选择
    if (!roomBookingCycleParams.value.endDate) {
      Message.info('请选择周期会议的结束日期')
    }
  } else {
    // 设置开始日期为当前会议的开始日期
    roomBookingCycleParams.value.startDate = roomBookingFormData.value.startDate

    // 根据不同的重复类型设置对应的参数
    switch (value) {
      case 'daily':
        // 每天重复：cycle=Day, interval=1
        roomBookingCycleParams.value.cycle = 'Day'
        roomBookingCycleParams.value.interval = 1
        roomBookingCycleParams.value.point = []
        roomBookingCycleParams.value.weekDay = []
        break
      case 'workdays':
        // 工作日重复：cycle=Week, point=[1,2,3,4,5]
        roomBookingCycleParams.value.cycle = 'Week'
        roomBookingCycleParams.value.interval = 1
        roomBookingCycleParams.value.point = [1, 2, 3, 4, 5] // 周一到周五
        roomBookingCycleParams.value.weekDay = [1, 2, 3, 4, 5]
        break
      case 'weekly':
        // 每周重复：cycle=Week, interval=1, point=[当前星期几]
        roomBookingCycleParams.value.cycle = 'Week'
        roomBookingCycleParams.value.interval = 1
        const currentWeekday = dayjs(roomBookingFormData.value.startDate).day()
        roomBookingCycleParams.value.point = [currentWeekday]
        roomBookingCycleParams.value.weekDay = [currentWeekday]
        break
      case 'biweekly':
        // 每两周重复：cycle=Week, interval=2, point=[当前星期几]
        roomBookingCycleParams.value.cycle = 'Week'
        roomBookingCycleParams.value.interval = 2
        const biweeklyWeekday = dayjs(roomBookingFormData.value.startDate).day()
        roomBookingCycleParams.value.point = [biweeklyWeekday]
        roomBookingCycleParams.value.weekDay = [biweeklyWeekday]
        break
      case 'monthly':
        // 每月重复：cycle=Month, interval=1, point=[当前日期]
        roomBookingCycleParams.value.cycle = 'Month'
        roomBookingCycleParams.value.interval = 1
        const currentDay = dayjs(roomBookingFormData.value.startDate).date()
        roomBookingCycleParams.value.point = [currentDay]
        roomBookingCycleParams.value.weekDay = []
        break
      default:
        break
    }

    // 设置默认结束日期（一个月后）
    if (!roomBookingCycleParams.value.endDate) {
      roomBookingCycleParams.value.endDate = dayjs(roomBookingFormData.value.startDate).add(1, 'month').format('YYYY-MM-DD')
    }
  }

  roomBookingRecurrenceType.value = value
}

const handleRoomBookingMeetingTypeChange = (value: number) => {
  roomBookingFormData.value.meetType = value
}

// 处理预约会议签到设置变更
const handleScheduleMeetingSignInChange = (value: number) => {
  if (value === 0) {
    // 关闭签到时，将所有签到相关参数设为0
    formData.value.confConfigInfo.signInBeforeMinutes = '0'
    formData.value.confConfigInfo.signOutMinutesAfterSignIn = '0'
    formData.value.confConfigInfo.signOutAfterEndMinutes = '0'
  } else {
    // 开启签到时，始终设置默认值为15
    formData.value.confConfigInfo.signInBeforeMinutes = '15'
    formData.value.confConfigInfo.signOutMinutesAfterSignIn = '15'
    formData.value.confConfigInfo.signOutAfterEndMinutes = '15'
  }
}

// 处理会议室预约签到设置变更
const handleRoomBookingSignInChange = (value: number) => {
  if (value === 0) {
    // 关闭签到时，将所有签到相关参数设为0
    roomBookingFormData.value.confConfigInfo.signInBeforeMinutes = '0'
    roomBookingFormData.value.confConfigInfo.signOutMinutesAfterSignIn = '0'
    roomBookingFormData.value.confConfigInfo.signOutAfterEndMinutes = '0'
  } else {
    // 开启签到时，始终设置默认值为15
    roomBookingFormData.value.confConfigInfo.signInBeforeMinutes = '15'
    roomBookingFormData.value.confConfigInfo.signOutMinutesAfterSignIn = '15'
    roomBookingFormData.value.confConfigInfo.signOutAfterEndMinutes = '15'
  }
}

// 打开会议室预约服务选择 - 直接使用预约会议的服务弹窗
const openRoomBookingServiceModal = () => {
  // 设置为会议室预约模式
  isRoomBookingMode.value = true

  // 将会议室预约已选择的服务同步到预约会议的服务选择器
  selectedServices.value = roomBookingServiceData.value
    .filter((item) => item.serviceId > 0)
    .map((item) => item.serviceId)

  // 同步服务备注
  roomBookingServiceData.value.forEach((item) => {
    if (item.description) {
      serviceRemarks.value[item.serviceId] = item.description
    }
  })

  // 直接使用预约会议手机端的服务弹窗
  showServiceModal.value = true
}

// 会议室预约标签页切换
const onRoomBookingTabChange = (activeKey) => {
  roomBookingActiveTab.value = activeKey
}

// 会议室预约取消按钮
const handleRoomBookingCancel = () => {
  showRoomBookingModal.value = false
  roomBookingActiveTab.value = '1'
}

// 会议室预约周期会议相关计算属性和方法
const roomBookingFormatStartDate = computed(() => {
  if (roomBookingFormData.value.startDate) {
    return roomBookingFormData.value.startDate
  }
  return ''
})

const getRoomBookingIntervalUnit = computed(() => {
  switch (roomBookingCycleParams.value.cycle) {
    case 'Day': return '天'
    case 'Week': return '周'
    case 'Month': return '月'
    default: return ''
  }
})

const toggleRoomBookingRecurringMeeting = () => {
  if (!isRoomBookingRecurringMeeting.value) {
    // 重置周期参数
    roomBookingCycleParams.value = {
      startDate: roomBookingFormData.value.startDate || '',
      endDate: '',
      cycle: '',
      interval: 1,
      weekDay: [],
      point: []
    }
  }
}

const onRoomBookingCycleChange = () => {
  // 重置选择点
  roomBookingCycleParams.value.point = []
  roomBookingInvalidDateWarning.value = false
}

// 会议室预约服务相关方法
const addRoomBookingServiceItem = () => {
  roomBookingServiceData.value.push({
    serviceId: 0,
    serviceName: '',
    responsiblePerson: '',
    description: ''
  })
}

const deleteRoomBookingServiceItem = () => {
  if (roomBookingServiceData.value.length > 0) {
    roomBookingServiceData.value.pop()
  }
}

const showRoomBookingServiceSelectModal = (index: number) => {
  roomBookingCurrentServiceIndex.value = index
  // 如果当前行已有选择的服务，则显示为选中状态
  const currentService = roomBookingServiceData.value[index]
  if (currentService && currentService.serviceId) {
    // 从服务列表中找到对应的服务对象
    roomBookingSelectedService.value = serveList.value.find((service) => service.id === currentService.serviceId) || null
  } else {
    roomBookingSelectedService.value = null
  }
  showRoomBookingServiceModal.value = true
}

const selectRoomBookingService = (service: any) => {
  roomBookingSelectedService.value = service
}

const confirmRoomBookingServiceSelection = () => {
  if (!roomBookingSelectedService.value) {
    Message.warning('请选择服务项目')
    return
  }

  const index = roomBookingCurrentServiceIndex.value
  if (index >= 0 && index < roomBookingServiceData.value.length) {
    roomBookingServiceData.value[index] = {
      serviceId: roomBookingSelectedService.value.id,
      serviceName: roomBookingSelectedService.value.serviceInfo,
      responsiblePerson: roomBookingSelectedService.value.userName || '',
      description: roomBookingServiceData.value[index].description // 保留原有描述
    }
  }

  showRoomBookingServiceModal.value = false
  roomBookingCurrentServiceIndex.value = -1
  roomBookingSelectedService.value = null
}

const cancelRoomBookingServiceSelection = () => {
  showRoomBookingServiceModal.value = false
  roomBookingCurrentServiceIndex.value = -1
  roomBookingSelectedService.value = null
}

const showRoomBookingOtherServiceInput = (index: number) => {
  roomBookingCurrentServiceIndex.value = index
  roomBookingOtherServiceText.value = roomBookingServiceData.value[index].description || ''
  showRoomBookingOtherServiceModal.value = true
}

const confirmRoomBookingOtherService = () => {
  const index = roomBookingCurrentServiceIndex.value
  if (index >= 0 && index < roomBookingServiceData.value.length) {
    roomBookingServiceData.value[index].description = roomBookingOtherServiceText.value
  }

  showRoomBookingOtherServiceModal.value = false
  roomBookingCurrentServiceIndex.value = -1
  roomBookingOtherServiceText.value = ''
}

const cancelRoomBookingOtherService = () => {
  showRoomBookingOtherServiceModal.value = false
  roomBookingCurrentServiceIndex.value = -1
  roomBookingOtherServiceText.value = ''
}

const onRoomBookingSubmit = async () => {
  if (isRoomBookingSubmitting.value) return // 防止重复提交

  // 验证必填字段
  if (!roomBookingFormData.value.subject?.trim()) {
    return Message.error('请输入会议主题！')
  }

  if (!roomBookingFormData.value.startTime) {
    return Message.error('请选择会议开始时间！')
  }

  // 地点是必填的
  if (!roomBookingFormData.value.meetRoomId) {
    return Message.error('请选择会议室！')
  }

  // 检查会议开始时间不能早于当前时间
  const now = dayjs()
  const startTime = dayjs(roomBookingFormData.value.startTime)
  if (startTime.isBefore(now)) {
    return Message.error('会议开始时间不能早于当前时间！')
  }

  // 检查会议时长并自动调整
  if (!roomBookingFormData.value.length || roomBookingFormData.value.length <= 0) {
    roomBookingFormData.value.length = 15
    Message.info('会议时长已自动设置为15分钟')
  }

  // 自动调整时长范围
  if (roomBookingFormData.value.length < 15) {
    roomBookingFormData.value.length = 15
    Message.info('会议时长不能少于15分钟，已自动调整')
  } else if (roomBookingFormData.value.length > 24 * 60) {
    roomBookingFormData.value.length = 24 * 60
    Message.info('会议时长不能超过24小时，已自动调整')
  }

  // 如果是自定义结束时间，检查结束时间
  if (roomBookingFormData.value.isCustomEndTime) {
    if (!roomBookingFormData.value.endDate || !roomBookingFormData.value.endTimeOfDay) {
      return Message.error('请选择会议结束时间！')
    }

    const endTime = dayjs(`${roomBookingFormData.value.endDate} ${roomBookingFormData.value.endTimeOfDay}:00`)
    if (endTime.isBefore(startTime) || endTime.isSame(startTime)) {
      return Message.error('会议结束时间必须晚于开始时间！')
    }

    // 自动调整结束时间范围
    const duration = endTime.diff(startTime, 'minute')
    const durationHours = endTime.diff(startTime, 'hour', true)

    if (duration < 15) {
      const newEndTime = startTime.add(15, 'minute')
      roomBookingFormData.value.endDate = newEndTime.format('YYYY-MM-DD')
      roomBookingFormData.value.endTimeOfDay = newEndTime.format('HH:mm')
      roomBookingFormData.value.length = 15
      Message.info('会议时长不能少于15分钟，已自动调整结束时间')
    } else if (durationHours > 24) {
      const newEndTime = startTime.add(24, 'hour')
      roomBookingFormData.value.endDate = newEndTime.format('YYYY-MM-DD')
      roomBookingFormData.value.endTimeOfDay = newEndTime.format('HH:mm')
      roomBookingFormData.value.length = 24 * 60
      Message.info('会议时长不能超过24小时，已自动调整结束时间')
    }
  }

  try {
    // 处理签到设置：如果关闭签到，确保所有签到相关参数都为0
    const confConfigInfo = { ...roomBookingFormData.value.confConfigInfo }
    if (confConfigInfo.enableSignOut === 0) {
      confConfigInfo.signInBeforeMinutes = '0'
      confConfigInfo.signOutMinutesAfterSignIn = '0'
      confConfigInfo.signOutAfterEndMinutes = '0'
    }

    // 构建请求数据 - 完全复制预约会议的数据结构
    const requestData = {
      userId, // ✅ 取自 URL
      subject: roomBookingFormData.value.subject,
      startTime: roomBookingFormData.value.startTime,
      length: roomBookingFormData.value.length,
      mediaTypes: roomBookingFormData.value.mediaTypes || 'HDVideo', // ✅ 默认 `HDVideo`
      meetRoomId: roomBookingFormData.value.meetRoomId,
      meetType: 0, // 会议室预约固定为线下会议
      remindTime: roomBookingFormData.value.remindTime, // 新增提醒参数
      inviteScreen: roomBookingFormData.value.inviteScreen, // 使用表单中的邀请大屏设置
      // 补全签到相关参数
      enableSignOut: confConfigInfo.enableSignOut || 0,
      signInBeforeMinutes: confConfigInfo.signInBeforeMinutes || '',
      signOutMinutesAfterSignIn: confConfigInfo.signOutMinutesAfterSignIn || '',
      signOutAfterEndMinutes: confConfigInfo.signOutAfterEndMinutes || '',

      // ✅ 会议配置信息
      confConfigInfo: {
        isGuestFreePwd: confConfigInfo.isGuestFreePwd || false,
        callInRestriction: confConfigInfo.callInRestriction || 0,
        guestPwd: confConfigInfo.guestPwd || '',
        enableWaitingRoom: confConfigInfo.enableWaitingRoom || false
      },
      // ✅ 如果是循环会议才提交 `cycleParams`
      cycleParams: roomBookingRecurrenceType.value !== 'none'
        ? {
            startDate: roomBookingCycleParams.value.startDate,
            endDate: roomBookingCycleParams.value.endDate,
            cycle: roomBookingCycleParams.value.cycle,
            interval: roomBookingCycleParams.value.interval,
            point: roomBookingCycleParams.value.cycle === 'Week' ? roomBookingCycleParams.value.point.map((d) => d % 7) : roomBookingCycleParams.value.point
          }
        : undefined,
      // ✅ 与会者列表
      attendees: roomBookingSelectedUsers.value.map((user) => ({
        accountId: user.userid,
        appId: '9dbd6b334e744eada42b45b3bf6b8402'
      })),
      // 会议服务
      ...(roomBookingServiceData.value.length > 0
        ? {
            serviceList: roomBookingServiceData.value
              .filter((item) => item.serviceId > 0) // 只提交已选择服务的项
              .map((item) => {
                const service = serveList.value.find((s) => s.id === item.serviceId)
                return {
                  serviceIds: [item.serviceId],
                  userIds: service && service.userId ? [service.userId] : [], // 负责人userId
                  otherService: item.description || ''
                }
              })
          }
        : {})
    }

    console.log('提交会议室预约请求:', requestData)

    isRoomBookingSubmitting.value = true // 开始提交，显示加载状态
    const response = await scheduleMeeting(requestData)

    // scheduleMeeting 函数成功时返回数据，失败时抛出异常
    // 所以能执行到这里说明调用成功
    Message.success('会议室预约成功！')
    showRoomBookingModal.value = false
    resetRoomBookingFormData()
    roomBookingActiveTab.value = '1'
    // 刷新主页会议列表
    await fatchMeetingList()
  } catch (error) {
    Message.error('会议室预约失败，请重试！')
    console.error('会议室预约失败:', error)
  } finally {
    isRoomBookingSubmitting.value = false // 无论成功失败，都重置提交状态
  }
}

// 处理会议室选择，并自动设置会议类型
const handleRoomSelection = (roomId: string) => {
  if (formData.value.meetRoomId === roomId) {
    formData.value.meetRoomId = undefined
    formData.value.meetType = 1
  } else {
    formData.value.meetRoomId = String(roomId)
    formData.value.meetType = 0
  }
}

// 移除参会者函数
const removeAttendee = (userId) => {
  // 从已选用户中移除
  selectedUsers.value = selectedUsers.value.filter((user) => user.userid !== userId)
  // 同时从选中的ID中移除
  checkedUserIds.value = checkedUserIds.value.filter((id) => id !== userId)
}

// 添加新的函数，用于打开用户选择弹窗
const openUserSelector = () => {
  // 设置为预约会议模式
  isRoomBookingMode.value = false

  // 清空搜索条件，避免上一次搜索结果影响
  modalSearchKeyword.value = ''
  modalSearchResults.value = []

  // 同步 checkedUserIds 为当前 selectedUsers
  checkedUserIds.value = selectedUsers.value.map((user) => user.userid)

  // 显示邀请弹窗
  showInviteModal.value = true
}

// 模态框中选择用户的处理函数 - 保留该方法用于点击行选择
const handleModalSelectUser = (userId) => {
  if (!userId) return

  // 从搜索结果中找到选中的用户
  const selectedUser = modalSearchResults.value.find((user) => user.userId === userId)
  if (!selectedUser) return

  // 切换选中状态
  const alreadyChecked = checkedUserIds.value.includes(selectedUser.userId)
  if (alreadyChecked) {
    // 如果是当前用户，则不允许取消选择
    if (selectedUser.userId === currentUserId.value) {
      Message.warning('您不能移除自己')
      return
    }

    // 取消选中
    checkedUserIds.value = checkedUserIds.value.filter((id) => id !== selectedUser.userId)
  } else {
    // 选中用户
    checkedUserIds.value.push(selectedUser.userId)
  }
}

// 处理日期变更
const onDateChange = (date) => {
  updateStartTimeFromDateAndTime()
}

// 处理时间变更
const onTimeChange = (time) => {
  updateStartTimeFromDateAndTime()
}

// 更新完整的开始时间
const updateStartTimeFromDateAndTime = () => {
  // 仅在日期和时间都选择后执行
  if (formData.value.startDate && formData.value.startTimeOfDay) {
    const dateStr = formData.value.startDate
    const timeStr = formData.value.startTimeOfDay

    // 合并日期和时间，确保包含秒数
    let newDateTime = `${dateStr} ${timeStr}`
    if (!timeStr.includes(':') || timeStr.split(':').length < 3) {
      // 如果时间不包含秒，添加秒
      newDateTime = `${dateStr} ${timeStr.includes(':') ? timeStr : `${timeStr}:00`}${timeStr.split(':').length < 3 ? ':00' : ''}`
    }
    formData.value.startTime = newDateTime

    // 如果使用自定义结束时间，更新结束时间相应值
    if (formData.value.isCustomEndTime && formData.value.endDate && formData.value.endTimeOfDay) {
      calculateDurationFromEndTime()
    }
  }
}

// 当开始时间变更时初始化日期和时间选择器
const initDateAndTimePickers = () => {
  if (formData.value.startTime) {
    const dateTime = dayjs(formData.value.startTime)
    formData.value.startDate = dateTime.format('YYYY-MM-DD')
    formData.value.startTimeOfDay = dateTime.format('HH:mm:ss')
  } else {
    // 默认设置为当前时间的下一个整点
    const now = dayjs()
    const nextHour = now.add(1, 'hour').startOf('hour')
    formData.value.startDate = nextHour.format('YYYY-MM-DD')
    formData.value.startTimeOfDay = nextHour.format('HH:mm:ss')

    // 同步更新startTime
    updateStartTimeFromDateAndTime()
  }
}

// 在组件挂载后初始化日期和时间选择器
onMounted(() => {
  initDateAndTimePickers()
})

// 处理时长选择变更，确保时长在15分钟到1440分钟之间
const handleDurationChange = (value: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]) => {
  const valueStr = String(value)
  // 确保开始时间已设置
  if (!formData.value.startTime) {
    const now = dayjs()
    const nextHour = now.add(1, 'hour').startOf('hour')
    formData.value.startDate = nextHour.format('YYYY-MM-DD')
    formData.value.startTimeOfDay = nextHour.format('HH:mm:ss')
    updateStartTimeFromDateAndTime()
  }

  if (valueStr === 'custom') {
    // 如果选择自定义结束时间
    formData.value.isCustomEndTime = true

    // 默认设置结束时间为开始时间加1小时
    const startDateTime = dayjs(`${formData.value.startDate} ${formData.value.startTimeOfDay}`)
    const endDateTime = startDateTime.add(1, 'hour')

    formData.value.endDate = endDateTime.format('YYYY-MM-DD')
    formData.value.endTimeOfDay = endDateTime.format('HH:mm:ss')

    // 仍然需要计算length以供API使用
    calculateDurationFromEndTime()
  } else {
    formData.value.isCustomEndTime = false

    // 获取选择的分钟数
    let selectedLength = Number.parseInt(valueStr, 10)

    // 应用时长限制
    if (selectedLength < 15) {
      Message.warning('会议时长最短为15分钟，已自动调整')
      selectedLength = 15
    } else if (selectedLength > 1440) {
      Message.warning('会议时长最长为24小时(1440分钟)，已自动调整')
      selectedLength = 1440
    }

    // 设置分钟数
    formData.value.length = selectedLength

    // 更新结束时间
    if (formData.value.startDate && formData.value.startTimeOfDay) {
      const startDateTime = dayjs(`${formData.value.startDate} ${formData.value.startTimeOfDay}`)
      const endDateTime = startDateTime.add(selectedLength, 'minute')

      // 更新结束日期和时间
      formData.value.endDate = endDateTime.format('YYYY-MM-DD')
      formData.value.endTimeOfDay = endDateTime.format('HH:mm:ss')
    }
  }
}

// 根据结束时间计算持续时间（分钟），并应用15分钟到1440分钟的限制
const calculateDurationFromEndTime = () => {
  if (!formData.value.startDate || !formData.value.startTimeOfDay
    || !formData.value.endDate || !formData.value.endTimeOfDay) {
    return
  }

  // 确保时间格式包含秒数
  let startTimeOfDay = formData.value.startTimeOfDay
  let endTimeOfDay = formData.value.endTimeOfDay

  if (!startTimeOfDay.includes(':ss') && !startTimeOfDay.match(/:\d{2}$/)) {
    startTimeOfDay = `${startTimeOfDay}:00`
  }

  if (!endTimeOfDay.includes(':ss') && !endTimeOfDay.match(/:\d{2}$/)) {
    endTimeOfDay = `${endTimeOfDay}:00`
  }

  const startDateTime = dayjs(`${formData.value.startDate} ${startTimeOfDay}`)
  const endDateTime = dayjs(`${formData.value.endDate} ${endTimeOfDay}`)

  // 计算时间差（分钟）
  const diffMinutes = endDateTime.diff(startDateTime, 'minute')

  // 应用时间限制
  if (diffMinutes < 15) {
    // 如果时间差小于15分钟
    Message.warning('会议时长最短为15分钟，已自动调整')
    // 重置为开始时间后15分钟
    const newEndDateTime = startDateTime.add(15, 'minute')
    formData.value.endDate = newEndDateTime.format('YYYY-MM-DD')
    formData.value.endTimeOfDay = newEndDateTime.format('HH:mm:ss')
    formData.value.length = 15
  } else if (diffMinutes > 1440) {
    // 如果时间差大于1440分钟（24小时）
    Message.warning('会议时长最长为24小时(1440分钟)，已自动调整')
    // 重置为开始时间后24小时
    const newEndDateTime = startDateTime.add(1440, 'minute')
    formData.value.endDate = newEndDateTime.format('YYYY-MM-DD')
    formData.value.endTimeOfDay = newEndDateTime.format('HH:mm:ss')
    formData.value.length = 1440
  } else if (diffMinutes <= 0) {
    // 如果结束时间早于或等于开始时间
    Message.error('结束时间必须晚于开始时间')
    // 重置为开始时间后1小时
    const newEndDateTime = startDateTime.add(60, 'minute')
    formData.value.endDate = newEndDateTime.format('YYYY-MM-DD')
    formData.value.endTimeOfDay = newEndDateTime.format('HH:mm:ss')
    formData.value.length = 60
  } else {
    // 设置持续时间（分钟）
    formData.value.length = Number(diffMinutes)
  }
}

// 修改后端API请求参数构建函数
const buildRequestData = () => {
  // 基本信息
  const requestData = {
    subject: formData.value.subject,
    startTime: formData.value.startTime,
    length: formData.value.length, // 使用计算出的分钟数
    mediaTypes: formData.value.mediaTypes,
    // 根据会议类型设置会议室ID
    meetRoomId: formData.value.meetType === 0 ? formData.value.meetRoomId : undefined,
    meetType: formData.value.meetType,
    // 参会人处理
    userList: selectedUsers.value.map((user) => ({ userid: user.userid })),
    // 会议配置信息
    confConfigInfo: formData.value.confConfigInfo
  }

  // 如果是周期性会议，添加周期参数
  if (formData.value.isRecurring) {
    requestData.cycleParams = {
      startDate: cycleParams.value.startDate,
      endDate: cycleParams.value.endDate,
      cycle: cycleParams.value.cycle,
      interval: cycleParams.value.interval,
      weekDay: cycleParams.value.cycle === 'Week' ? cycleParams.value.weekDay.map((d) => d % 7) : cycleParams.value.weekDay
    }
  }

  return requestData
}

// 修复null类型错误
function handleSubmit() {
  // ... existing code ...

  // 将可能为null的值转换为空字符串
  const formDataToSubmit = {
    ...formData.value,
    startTime: formData.value.startTime || '',
    startDate: formData.value.startDate || '',
    startTimeOfDay: formData.value.startTimeOfDay || '',
    endTimeOfDay: formData.value.endTimeOfDay || ''
  }

  // ... existing code ...
}
// 在methods部分中添加confirmSettings方法
const confirmSettings = () => {
  showSettingsModal.value = false
  // 可以在这里添加保存设置的逻辑
}

// 会议室预约设置确认
const confirmRoomBookingSettings = () => {
  showMobileRoomBookingSettingsModal.value = false
  // 可以在这里添加保存设置的逻辑
}

// 处理重复类型变化
const handleRecurrenceTypeChange = (value: string) => {
  // 如果选择了不重复，则相当于关闭周期会议
  isRecurringMeeting.value = value !== 'none'

  // 根据选择的重复类型设置循环参数
  if (value === 'none') {
    // 重置周期参数
    cycleParams.value = {
      startDate: formData.value.startDate,
      endDate: '',
      cycle: '',
      interval: 1,
      weekDay: []
    }
    // 确保关闭循环会议标记
    formData.value.isRecurring = false
  } else if (value === 'custom') {
    // 自定义模式，设置默认值但由用户自行调整
    formData.value.isRecurring = true
    cycleParams.value.startDate = formData.value.startDate

    if (!cycleParams.value.cycle) {
      cycleParams.value.cycle = 'Day'
      cycleParams.value.interval = 1
      cycleParams.value.point = []
      cycleParams.value.weekDay = []
    }

    // 设置为预约会议模式
    isRoomBookingMode.value = false

    // 显示自定义周期会议设置模态框
    showCustomRecurrenceModal.value = true
  } else if (value === 'custom-rule') {
    // 已经设置了自定义规则，不需要重新设置参数
    // 只需确保isRecurring标志是设置的
    formData.value.isRecurring = true

    // 如果没有结束日期，则提示用户选择
    if (!cycleParams.value.endDate) {
      Message.info('请选择周期会议的结束日期')
    }
  } else {
    // 设置开始日期为当前会议的开始日期
    cycleParams.value.startDate = formData.value.startDate
    formData.value.isRecurring = true

    // 根据不同的重复类型设置对应的参数
    switch (value) {
      case 'daily':
        // 每天重复：cycle=Day, interval=1
        cycleParams.value.cycle = 'Day'
        cycleParams.value.interval = 1
        cycleParams.value.point = []
        cycleParams.value.weekDay = []
        Message.info('已设置为每天重复，请选择结束日期')
        break
      case 'workdays':
        // 每个工作日重复：cycle=Week, interval=1, point=[1,2,3,4,5]（周一到周五）
        cycleParams.value.cycle = 'Week'
        cycleParams.value.interval = 1
        cycleParams.value.point = [1, 2, 3, 4, 5] // 周一到周五
        cycleParams.value.weekDay = [1, 2, 3, 4, 5] // 兼容weekDay属性
        Message.info('已设置为每个工作日重复，请选择结束日期')
        break
      case 'weekly':
        // 每周重复：cycle=Week, interval=1, point=[当前日期的星期]
        cycleParams.value.cycle = 'Week'
        cycleParams.value.interval = 1

        // 设置为会议开始日期的星期几
        if (formData.value.startDate) {
          const startWeekDay = dayjs(formData.value.startDate).day()
          // 将0(周日)转换为7，保持1-7的表示方式
          const adjustedDay = startWeekDay === 0 ? 7 : startWeekDay
          cycleParams.value.point = [adjustedDay]
          cycleParams.value.weekDay = [adjustedDay]
        }
        Message.info('已设置为每周重复，请选择结束日期')
        break
      case 'biweekly':
        // 每两周重复：cycle=Week, interval=2, point=[当前日期的星期]
        cycleParams.value.cycle = 'Week'
        cycleParams.value.interval = 2

        // 设置为会议开始日期的星期几
        if (formData.value.startDate) {
          const startWeekDay = dayjs(formData.value.startDate).day()
          // 将0(周日)转换为7，保持1-7的表示方式
          const adjustedDay = startWeekDay === 0 ? 7 : startWeekDay
          cycleParams.value.point = [adjustedDay]
          cycleParams.value.weekDay = [adjustedDay]
        }
        Message.info('已设置为每两周重复，请选择结束日期')
        break
      case 'monthly':
        // 每月重复：cycle=Month, interval=1, point=[当前日期的天]
        cycleParams.value.cycle = 'Month'
        cycleParams.value.interval = 1

        // 设置为会议开始日期的日期
        if (formData.value.startDate) {
          const dayOfMonth = dayjs(formData.value.startDate).date()
          cycleParams.value.point = [dayOfMonth]
          cycleParams.value.weekDay = []
        }
        Message.info('已设置为每月重复，请选择结束日期')
        break
    }
  }

  // 确保设置isRecurring标志，这样后续提交时会包含周期会议参数
  formData.value.isRecurring = isRecurringMeeting.value
}

// 取消自定义周期会议设置
const cancelCustomRecurrence = () => {
  showCustomRecurrenceModal.value = false
}

// 确认自定义周期会议设置
const confirmCustomRecurrence = () => {
  showCustomRecurrenceModal.value = false

  // 判断是否为会议室预约模式
  if (isRoomBookingMode.value) {
    // 会议室预约模式：将设置应用到会议室预约参数
    roomBookingCycleParams.value = { ...cycleParams.value }

    // 生成自定义规则描述
    let customRuleDescription = ''
    if (cycleParams.value.cycle === 'Day') {
      customRuleDescription = `每${cycleParams.value.interval}天重复`
    } else if (cycleParams.value.cycle === 'Week') {
      // 获取选中的星期几
      const weekdayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const selectedDays = cycleParams.value.point.map((day) => weekdayNames[day]).join('、')
      customRuleDescription = `每${cycleParams.value.interval === 1 ? '' : cycleParams.value.interval}周的${selectedDays}重复`
    } else if (cycleParams.value.cycle === 'Month') {
      // 获取选中的日期
      const selectedDates = cycleParams.value.point.map((day) => `${day}日`).join('、')
      customRuleDescription = `每${cycleParams.value.interval === 1 ? '' : cycleParams.value.interval}月的${selectedDates}重复`
    }

    // 将自定义规则描述设置为当前选中的重复类型
    roomBookingRecurrenceType.value = 'custom-rule'
  } else {
    // 预约会议模式：将自定义周期会议设置应用到表单中
    formData.value.isRecurring = true
    formData.value.cycleParams = { ...cycleParams.value }

    // 生成自定义规则描述
    let customRuleDescription = ''
    if (cycleParams.value.cycle === 'Day') {
      customRuleDescription = `每${cycleParams.value.interval}天重复`
    } else if (cycleParams.value.cycle === 'Week') {
      // 获取选中的星期几
      const weekdayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const selectedDays = cycleParams.value.point.map((day) => weekdayNames[day]).join('、')
      customRuleDescription = `每${cycleParams.value.interval === 1 ? '' : cycleParams.value.interval}周的${selectedDays}重复`
    } else if (cycleParams.value.cycle === 'Month') {
      // 获取选中的日期
      const selectedDates = cycleParams.value.point.map((day) => `${day}日`).join('、')
      customRuleDescription = `每${cycleParams.value.interval === 1 ? '' : cycleParams.value.interval}月的${selectedDates}重复`
    }

    // 将自定义规则描述设置为当前选中的重复类型
    recurrenceType.value = 'custom-rule'
  }

  // 动态添加自定义规则选项
  // 在下一个DOM更新周期确保自定义规则选项被添加到下拉框
  nextTick(() => {
    // 确保结束日期选择器显示
    if (!cycleParams.value.endDate) {
      // 如果没有设置结束日期，默认设置为一个月后
      cycleParams.value.endDate = dayjs().add(1, 'month').format('YYYY-MM-DD')
    }
  })
}

const showRoomSelectModal = ref(false)
const tempSelectedRoomId = ref<string | undefined>(undefined)
const selectedRoomName = ref('')
const isRoomBookingMode = ref(false) // 标识是否为会议室预约模式

const confirmRoomSelection = () => {
  showRoomSelectModal.value = false

  if (isRoomBookingMode.value) {
    // 会议室预约模式
    roomBookingFormData.value.meetRoomId = tempSelectedRoomId.value
    roomBookingSelectedRoomName.value = meetingRoomList.value.find((room) => room.id === tempSelectedRoomId.value)?.name || ''
    isRoomBookingMode.value = false // 重置标识
  } else {
    // 预约会议模式
    formData.value.meetRoomId = tempSelectedRoomId.value
    selectedRoomName.value = meetingRoomList.value.find((room) => room.id === tempSelectedRoomId.value)?.name || ''
    // 新增：只要选了会议室就设置为线下会议
    if (formData.value.meetRoomId) {
      formData.value.meetType = 0
    }
  }
}

const clearRoomSelection = () => {
  selectedRoomName.value = ''
  formData.value.meetRoomId = undefined
  tempSelectedRoomId.value = null
  formData.value.meetType = 1 // 设置为线上会议类型

  // 清除会议地点时同时清除已选择的服务
  selectedServices.value = []
  serviceRemarks.value = {}
}

// 新增：地点输入框点击时，强制刷新会议室列表
const onLocationInputClick = async () => {
  showRoomSelectModal.value = true
  await fetchMeetingRooms()
}

function goToFuchuangMeeting() {
  if (userId) {
    window.open(`https://meeting.fortunesemic.com/login?userId=${encodeURIComponent(userId)}`, '_blank')
  }
}
// 添加编辑会议的函数
const editMeeting = async (meeting) => {
  // 1. 拉取详情
  const conferenceId = meeting.conferenceId || meeting.meetingId
  if (!conferenceId) {
    Message.error('会议ID缺失，无法编辑')
    return
  }
  formData.value._conferenceId = conferenceId // 用下划线前缀，避免和表单字段冲突
  try {
    // 传userId参数
    const res = await getMeetInfo(conferenceId, userId)
    const detail = res.data || {}
    // 2. 填充表单
    formData.value.subject = detail.subject || ''
    formData.value.startTime = detail.startTime || ''
    formData.value.startDate = detail.startTime ? detail.startTime.split(' ')[0] : ''
    formData.value.startTimeOfDay = detail.startTime ? detail.startTime.split(' ')[1]?.slice(0, 5) : ''
    formData.value.length = detail.length || 60
    formData.value.durationType = String(detail.length || 60)
    formData.value.isCustomEndTime = false
    formData.value.endDate = detail.endTime ? detail.endTime.split(' ')[0] : ''
    formData.value.endTimeOfDay = detail.endTime ? detail.endTime.split(' ')[1]?.slice(0, 5) : ''
    // 兼容媒体类型字段
    if (typeof detail.mediaType !== 'undefined') {
      formData.value.mediaTypes = detail.mediaType === 1 ? 'HDVideo' : 'Voice'
    } else {
      formData.value.mediaTypes = detail.mediaTypes || 'HDVideo'
    }
    formData.value.meetRoomId = detail.meetRoomId || detail.meetingRoomId || undefined
    formData.value.meetType = detail.meetType ?? 1
    // 兼容来宾设置字段
    formData.value.confConfigInfo = {
      isGuestFreePwd: !!(detail.passwordGeneral && detail.passwordGeneral !== ''),
      guestPwd: detail.passwordGeneral || '',
      callInRestriction: typeof detail.callInRestriction !== 'undefined' ? detail.callInRestriction : 0,
      enableWaitingRoom: !!detail.enableWaitingRoom,
      enableSignOut: Number(detail.enableSignOut) || 0,
      signInBeforeMinutes: detail.signInBeforeMinutes || '',
      signOutMinutesAfterSignIn: detail.signOutMinutesAfterSignIn || '',
      signOutAfterEndMinutes: detail.signOutAfterEndMinutes || ''
    }
    // 3. 参会人（过滤 type=0）
    selectedUsers.value = (detail.participants || [])
      .filter((u) => u.type !== 0)
      .map((u) => ({
        userid: u.userid || u.userId,
        name: u.realname || u.username || u.name,
        avatar: u.avatar || ''
      }))
    // 4. 会议室名称和自动选中
    formData.value.meetingRoomId = detail.meetingRoomId || detail.meetRoomId || undefined
    if (formData.value.meetingRoomId) {
      try {
        const roomDetail = await getRoom(formData.value.meetingRoomId)
        selectedRoomName.value = roomDetail?.name || roomDetail?.location || detail.location || ''
      } catch (e) {
        const room = meetingRoomList.value.find(
          (r) => r.id === formData.value.meetingRoomId
        )
        selectedRoomName.value = room?.name || detail.location || ''
      }
    } else {
      selectedRoomName.value = detail.location || ''
    }
    // 5. 周期/重复规则
    if (detail.cycle && detail.interval && Array.isArray(detail.point)) {
      // 统一周期参数结构
      const cycleParamObj = {
        startDate: detail.cycleStartDate || detail.startDate || detail.startTime?.split(' ')[0] || '',
        endDate: detail.cycleEndDate || detail.endDate || '',
        cycle: detail.cycle,
        interval: detail.interval,
        point: Array.isArray(detail.point) ? detail.point : [],
        weekDay: Array.isArray(detail.point) ? detail.point : []
      }
      cycleParams.value = { ...cycleParamObj }
      formData.value.cycleParams = { ...cycleParamObj }
      // 动态生成自定义描述
      let customRuleDesc = ''
      if (detail.cycle === 'Month') {
        if (Array.isArray(detail.point) && detail.point.length > 1) {
          customRuleDesc = `每月的${detail.point.map((d) => `${d}日`).join('、')}重复`
          recurrenceType.value = 'custom-rule'
        } else {
          recurrenceType.value = 'monthly'
        }
      } else if (detail.cycle === 'Day') {
        recurrenceType.value = 'daily'
      } else if (detail.cycle === 'Week') {
        const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        if (Array.isArray(detail.point) && (detail.point.length > 1 || (detail.point.length === 1 && ![1, 2, 3, 4, 5].includes(detail.point[0])))) {
          customRuleDesc = `每周的${detail.point.map((d) => weekMap[d]).join('、')}重复`
          recurrenceType.value = 'custom-rule'
        } else if (detail.interval === 1 && detail.point.length === 5 && detail.point.every((d) => d >= 1 && d <= 5)) {
          recurrenceType.value = 'workdays'
        } else {
          recurrenceType.value = 'weekly'
        }
      } else {
        recurrenceType.value = 'custom'
      }
      customRuleDescription.value = customRuleDesc
      isRecurringMeeting.value = true
      formData.value.isRecurring = true
    } else {
      recurrenceType.value = 'none'
      cycleParams.value = {
        startDate: '',
        endDate: '',
        cycle: '',
        interval: 1,
        weekDay: [],
        point: []
      }
      isRecurringMeeting.value = false
      formData.value.isRecurring = false
    }
    // 6. 根据设备类型进入编辑模式
    isEditMode.value = true
    editConferenceId.value = conferenceId
    if (isMobile.value) {
      showMobileEditPage.value = true
    } else {
      showScheduleMeetingModal.value = true
    }
  } catch (err) {
    Message.error('获取会议详情失败')
  }
}

// 移动端编辑会议提交函数
const onEditMeetingSubmit = async () => {
  // 复用PC端的编辑会议逻辑
  await onScheduleMeetingSubmit()
}

// 修复取消会议函数，确保正确处理meetingId
const cancelMeeting = (meetingId: string) => {
  if (!meetingId) return
  // 显示确认对话框
  Modal.confirm({
    title: '取消会议',
    content: '确认要取消此会议吗？',
    onOk: async () => {
      try {
        await cancelSchedule({ meetingId })
        Message.success('会议已取消')
        getMeetingInfo()
      } catch (err) {
        console.error('取消会议失败', err)
        Message.error('取消会议失败')
      }
    }
  })
}

// 添加showCancelConfirm函数，调用现有的EscMeeting函数
const showCancelConfirm = (meeting: any) => {
  // 使用现有的EscMeeting函数处理取消会议逻辑
  EscMeeting(meeting)
}

// 显示周期会议结束日期的弹窗
const showCycleEndDate = (meeting) => {
  if (meeting.cycleEndDate) {
    Message.info(`直到 ${meeting.cycleEndDate} 结束`)
  }
}

const goToMeetingDetail = (meeting: any) => {
  console.log('点击会议项', meeting)
  const conferenceId = meeting.conferenceId
  if (!conferenceId) {
    Message.error('会议ID缺失，无法跳转详情')
    return
  }
  // 跳转时带上userId
  router.push({
    path: `/meetingDetail/${conferenceId}`,
    query: userId ? { userId } : undefined
  })
}

const showMobileSchedulePage = ref(false)
const showMobileEditPage = ref(false)

const closeMobileSchedulePage = () => {
  showMobileSchedulePage.value = false
}

const closeMobileEditPage = () => {
  showMobileEditPage.value = false
  // 重置编辑模式
  isEditMode.value = false
  editConferenceId.value = ''
  // 重置表单数据
  resetFormData()
}

// 重置表单数据函数
const resetFormData = () => {
  formData.value = {
    subject: '',
    startTime: '',
    startDate: '',
    startTimeOfDay: '',
    length: 60,
    durationType: '60',
    isCustomEndTime: false,
    endDate: '',
    endTimeOfDay: '',
    mediaTypes: 'HDVideo',
    meetRoomId: undefined,
    meetType: 1,
    remindTime: '0',
    inviteScreen: 1, // 新增，重置邀请大屏，默认邀请
    confConfigInfo: {
      isGuestFreePwd: false,
      callInRestriction: 0,
      guestPwd: '',
      enableWaitingRoom: false,
      enableSignOut: 0,
      signInBeforeMinutes: '',
      signOutMinutesAfterSignIn: '',
      signOutAfterEndMinutes: ''
    },
    cycleParams: {
      startDate: '',
      endDate: '',
      cycle: '',
      interval: 1,
      weekDay: [],
      point: []
    },
    isOnline: true,
    isRecurring: false,
    _conferenceId: '',
    offlineParam: '',
    serviceList: [
      { serviceIds: [], userIds: [], otherService: '' }
    ]
  }
  selectedUsers.value = []
  selectedRoomName.value = ''
  recurrenceType.value = 'none'
  cycleParams.value = {
    startDate: '',
    endDate: '',
    cycle: '',
    interval: 1,
    weekDay: [],
    point: []
  }
}

const showMobileUserSelector = ref(false)
const tempSelectedUsers = ref<{ userid: string, name: string, avatar: string }[]>([])
const tempCheckedUserIds = ref<string[]>([])

const openMobileUserSelector = () => {
  // 设置为预约会议模式
  isRoomBookingMode.value = false

  tempSelectedUsers.value = [...selectedUsers.value]
  tempCheckedUserIds.value = tempSelectedUsers.value.map((u) => u.userid)
  showMobileUserSelector.value = true
}
const closeMobileUserSelector = () => {
  showMobileUserSelector.value = false
}
const confirmMobileUserSelector = () => {
  // 根据模式更新对应的用户列表
  if (isRoomBookingMode.value) {
    roomBookingSelectedUsers.value = [...tempSelectedUsers.value]
  } else {
    selectedUsers.value = [...tempSelectedUsers.value]
  }
  checkedUserIds.value = tempSelectedUsers.value.map((u) => u.userid)
  showMobileUserSelector.value = false
}
const toggleTempUser = (user) => {
  const idx = tempSelectedUsers.value.findIndex((u) => u.userid === user.userId)
  if (idx > -1) {
    tempSelectedUsers.value.splice(idx, 1)
    tempCheckedUserIds.value = tempCheckedUserIds.value.filter((id) => id !== user.userId)
  } else {
    tempSelectedUsers.value.push({
      userid: user.userId,
      name: user.username,
      avatar: user.avatar || ''
    })
    tempCheckedUserIds.value.push(user.userId)
  }
}

// 新增：通过userid移除临时选择的用户
const removeTempUserById = (userid: string) => {
  const idx = tempSelectedUsers.value.findIndex((u) => u.userid === userid)
  if (idx > -1) {
    tempSelectedUsers.value.splice(idx, 1)
    tempCheckedUserIds.value = tempCheckedUserIds.value.filter((id) => id !== userid)
  }
}
// 树选择同步头像
watch(tempCheckedUserIds, (newVal) => {
  // 合并所有可选用户
  const allUsers = [...modalSearchResults.value, ...flattenUserTree(userTreeData.value)]
  tempSelectedUsers.value = newVal.map((id) => {
    const user = allUsers.find((u) => u.userId === id || u.userid === id)
    if (!user) return null
    // 兼容 userId/username 及 userid/name
    return {
      userid: user.userId || user.userid || '',
      name: user.username || user.name || '',
      avatar: user.avatar || ''
    } as { userid: string, name: string, avatar: string }
  }).filter((u): u is { userid: string, name: string, avatar: string } => u !== null)
})
// 递归拍平成树所有用户节点
function flattenUserTree(tree) {
  let arr = []
  for (const node of tree) {
    if (node.type === 'user' || node.class === 'user-node') {
      arr.push({
        userId: node.value,
        username: node.title,
        avatar: node.avatar || ''
      })
    }
    if (node.children) arr = arr.concat(flattenUserTree(node.children))
  }
  return arr
}

// 在 <script setup lang="ts"> 末尾添加，确保每次打开预约会议时自动带上预约人：
watch(showMobileSchedulePage, (val) => {
  if (val && isMobile.value && userId) {
    // 如果当前用户不在参会人列表，则自动加入
    if (!selectedUsers.value.some((u) => u.userid === userId)) {
      // 从用户树中查找当前用户信息
      const selfNode = findUserById(userTreeData.value, userId)
      if (selfNode) {
        selectedUsers.value.unshift({
          userid: userId,
          name: selfNode.title || '我',
          avatar: selfNode.avatar || ''
        })
      } else {
        selectedUsers.value.unshift({
          userid: userId,
          name: '我',
          avatar: ''
        })
      }
    }
  }
})

// 监听编辑会议弹窗
watch(showMobileEditPage, (val) => {
  if (val && isMobile.value && userId) {
    // 如果当前用户不在参会人列表，则自动加入
    if (!selectedUsers.value.some((u) => u.userid === userId)) {
      // 从用户树中查找当前用户信息
      const selfNode = findUserById(userTreeData.value, userId)
      if (selfNode) {
        selectedUsers.value.unshift({
          userid: userId,
          name: selfNode.title || '我',
          avatar: selfNode.avatar || ''
        })
      } else {
        selectedUsers.value.unshift({
          userid: userId,
          name: '我',
          avatar: ''
        })
      }
    }
  }
})

// 页面加载时检查编辑会议参数
onMounted(() => {
  const action = route.query.action
  const conferenceId = route.query.conferenceId

  if (action === 'edit' && conferenceId && isMobile.value) {
    // 延迟执行，确保页面完全加载
    nextTick(() => {
      editMeeting({ conferenceId })
    })
  }
})

const showStartTimePicker = ref(false)
const activePickerTab = ref<'date' | 'time'>('date')

// 日期相关
const now = dayjs()
const yearList = Array.from({ length: 6 }, (_, i) => now.year() + i)
const monthList = Array.from({ length: 12 }, (_, i) => i + 1)
const dateYear = ref(Number(formData.value.startDate?.split('-')[0]) || now.year())
const dateMonth = ref(Number(formData.value.startDate?.split('-')[1]) || now.month() + 1)
const dateDay = ref(Number(formData.value.startDate?.split('-')[2]) || now.date())
const today = now.format('YYYY-MM-DD')
const dayList = computed(() => {
  const days = dayjs(`${dateYear.value}-${dateMonth.value}-01`).daysInMonth()
  return Array.from({ length: days }, (_, i) => i + 1)
})
// 日历渲染
const calendarDays = computed(() => {
  const firstDay = dayjs(`${dateYear.value}-${dateMonth.value}-01`).day()
  const days = dayjs(`${dateYear.value}-${dateMonth.value}-01`).daysInMonth()
  const arr = []
  for (let i = 0; i < firstDay; i++) arr.push({ key: `empty-${i}`, day: '', isDisabled: true })
  for (let d = 1; d <= days; d++) {
    const dateStr = `${dateYear.value}-${dateMonth.value.toString().padStart(2, '0')}-${d.toString().padStart(2, '0')}`
    const isDisabled = dayjs(dateStr).isBefore(today, 'day')
    arr.push({
      key: dateStr,
      day: d,
      isCurrent: dateStr === today,
      isDisabled,
      isSelected: d === dateDay.value && dateYear.value === Number(formData.value.startDate?.split('-')[0]) && dateMonth.value === Number(formData.value.startDate?.split('-')[1])
    })
  }
  return arr
})
function selectCalendarDay(d) {
  if (!d.isDisabled) dateDay.value = d.day
}

// 时间相关
const timeHour = ref(Number(formData.value.startTimeOfDay?.split(':')[0]) || now.hour())
const timeMinute = ref(Math.floor((Number(formData.value.startTimeOfDay?.split(':')[1]) || now.minute()) / 5) * 5)
const hourList = Array.from({ length: 24 }, (_, i) => i)
const minuteList = Array.from({ length: 12 }, (_, i) => i * 5) // 0,5,10,...55
function selectHour(h) { timeHour.value = h }
function selectMinute(m) { timeMinute.value = m }

// 新增：月份切换方法
function changeMonth(direction) {
  if (direction === -1) {
    if (dateMonth.value === 1) {
      dateMonth.value = 12
      dateYear.value--
    } else {
      dateMonth.value--
    }
  } else if (direction === 1) {
    if (dateMonth.value === 12) {
      dateMonth.value = 1
      dateYear.value++
    } else {
      dateMonth.value++
    }
  }
  // 切换月份后，如果当前选中的日期超出新月份天数，则自动选中最后一天
  const daysInMonth = dayjs(`${dateYear.value}-${dateMonth.value}-01`).daysInMonth()
  if (dateDay.value > daysInMonth) {
    dateDay.value = daysInMonth
  }
}

// 临时显示值
const tempStartDate = computed(() => `${dateYear.value}-${dateMonth.value.toString().padStart(2, '0')}-${dateDay.value.toString().padStart(2, '0')}`)
const tempStartTime = computed(() => `${timeHour.value.toString().padStart(2, '0')}:${timeMinute.value.toString().padStart(2, '0')}`)
const tempStartDateLabel = computed(() => dayjs(tempStartDate.value).format('M月D日'))
const tempStartTimeLabel = computed(() => tempStartTime.value)

const startTimeDisplay = computed(() => {
  if (formData.value.startDate && formData.value.startTimeOfDay) {
    const date = formData.value.startDate
    const week = getZhWeekday(date)
    const todayStr = isToday(date) ? '（今天）' : ''
    // 只显示到分钟
    const time = formData.value.startTimeOfDay.slice(0, 5)
    return `${dayjs(date).format('M月D日')} ${week}${todayStr} ${time}`
  }
  return '请选择开始时间'
})

// 新增：分别获取开始日期和时间显示
const getStartDateDisplay = () => {
  if (formData.value.startDate) {
    const date = formData.value.startDate
    const week = getZhWeekday(date)
    const todayStr = isToday(date) ? '（今天）' : ''
    return `${dayjs(date).format('M月D日')} ${week}${todayStr}`
  }
  return '选择日期'
}

const getStartTimeDisplay = () => {
  if (formData.value.startTimeOfDay) {
    return formData.value.startTimeOfDay.slice(0, 5) // 只显示到分钟
  }
  return '选择时间'
}

const getEndDateDisplay = () => {
  if (formData.value.endDate) {
    const date = formData.value.endDate
    const week = getZhWeekday(date)
    const todayStr = isToday(date) ? '（今天）' : ''
    return `${dayjs(date).format('M月D日')} ${week}${todayStr}`
  }
  return '选择日期'
}

const getEndTimeDisplay = () => {
  if (formData.value.endTimeOfDay) {
    return formData.value.endTimeOfDay.slice(0, 5) // 只显示到分钟
  }
  return '选择时间'
}

// 会议室预约结束时间显示函数
const getRoomBookingEndDateDisplay = () => {
  if (roomBookingFormData.value.endDate) {
    const date = roomBookingFormData.value.endDate
    const week = getZhWeekday(date)
    const todayStr = isToday(date) ? '（今天）' : ''
    return `${dayjs(date).format('M月D日')} ${week}${todayStr}`
  }
  return '选择日期'
}

const getRoomBookingEndTimeDisplay = () => {
  if (roomBookingFormData.value.endTimeOfDay) {
    return roomBookingFormData.value.endTimeOfDay.slice(0, 5) // 只显示到分钟
  }
  return '选择时间'
}

// 会议室预约开始时间显示函数
const getRoomBookingStartDateDisplay = () => {
  if (roomBookingFormData.value.startDate) {
    // startDate 可能包含时间，只提取日期部分
    const date = roomBookingFormData.value.startDate.split(' ')[0] || roomBookingFormData.value.startDate
    const week = getZhWeekday(date)
    const todayStr = isToday(date) ? '（今天）' : ''
    return `${dayjs(date).format('M月D日')} ${week}${todayStr}`
  }
  return '选择日期'
}

const getRoomBookingStartTimeDisplay = () => {
  if (roomBookingFormData.value.startTimeOfDay) {
    return roomBookingFormData.value.startTimeOfDay.slice(0, 5) // 只显示到分钟
  }
  return '选择时间'
}
function confirmStartTime() {
  formData.value.startDate = tempStartDate.value
  formData.value.startTimeOfDay = tempStartTime.value
  showStartTimePicker.value = false
  // 修复：同步 startTime 字段，确保后端提交正确
  updateStartTimeFromDateAndTime()
}

const showDurationModal = ref(false)
const showDurationPage = ref(false)
const showEndTimePicker = ref(false)
const activeEndPickerTab = ref<'date' | 'time'>('date')
const closeDurationPage = () => { showDurationPage.value = false }
const durationOptions = [
  { value: '30', label: '30分钟' },
  { value: '60', label: '1小时' },
  { value: '120', label: '2小时' },
  { value: '180', label: '3小时' },
  { value: 'custom', label: '自定义结束时间' }
]
const getDurationLabel = (val: string) => {
  const found = durationOptions.find((opt) => opt.value === val)
  return found ? found.label : ''
}
const selectDuration = (val: string) => {
  formData.value.durationType = val
  if (val === 'custom') {
    formData.value.isCustomEndTime = true
    // 默认设置结束时间为开始时间加1小时
    const startDateTime = dayjs(`${formData.value.startDate} ${formData.value.startTimeOfDay}`)
    const endDateTime = startDateTime.add(1, 'hour')
    formData.value.endDate = endDateTime.format('YYYY-MM-DD')
    formData.value.endTimeOfDay = endDateTime.format('HH:mm:ss')
    // 初始化结束时间选择器的临时变量
    endDateYear.value = endDateTime.year()
    endDateMonth.value = endDateTime.month() + 1
    endDateDay.value = endDateTime.date()
    endTimeHour.value = endDateTime.hour()
    endTimeMinute.value = endDateTime.minute()
    showDurationModal.value = false // 先关闭时长选择弹窗
    showEndTimePicker.value = true // 立即弹出结束时间选择弹窗
    // 关键：弹窗显示后多等一帧再滚动
    nextTick(() => {
      nextTick(() => {
        scrollToSelectedEndTime()
      })
    })
    // showDurationPage.value = false 由结束时间选择弹窗关闭时处理
  } else {
    formData.value.isCustomEndTime = false
    formData.value.length = Number.parseInt(val, 10)
    showDurationModal.value = false
    showDurationPage.value = false
  }
}

// 会议室预约时长选择相关
const roomBookingDurationOptions = [
  { value: '30', label: '30分钟' },
  { value: '60', label: '1小时' },
  { value: '120', label: '2小时' },
  { value: '180', label: '3小时' },
  { value: 'custom', label: '自定义结束时间' }
]

const getRoomBookingDurationLabel = (val: string) => {
  const found = roomBookingDurationOptions.find((opt) => opt.value === val)
  return found ? found.label : ''
}

const selectRoomBookingDuration = (val: string) => {
  roomBookingFormData.value.durationType = val
  if (val === 'custom') {
    roomBookingFormData.value.isCustomEndTime = true
    // 默认设置结束时间为开始时间加1小时
    const startDateTime = dayjs(`${roomBookingFormData.value.startDate} ${roomBookingFormData.value.startTimeOfDay}`)
    const endDateTime = startDateTime.add(1, 'hour')
    roomBookingFormData.value.endDate = endDateTime.format('YYYY-MM-DD')
    roomBookingFormData.value.endTimeOfDay = endDateTime.format('HH:mm:ss')

    // 初始化结束时间选择器的临时变量
    roomBookingEndDateYear.value = endDateTime.year()
    roomBookingEndDateMonth.value = endDateTime.month() + 1
    roomBookingEndDateDay.value = endDateTime.date()
    roomBookingEndTimeHour.value = endDateTime.hour()
    roomBookingEndTimeMinute.value = Math.floor(endDateTime.minute() / 5) * 5
    roomBookingActiveEndPickerTab.value = 'date'

    showRoomBookingEndTimePicker.value = true // 弹出结束时间选择弹窗
  } else {
    roomBookingFormData.value.isCustomEndTime = false
    roomBookingFormData.value.length = Number.parseInt(val)
    // 自动调整时长限制
    if (roomBookingFormData.value.length < 15) {
      roomBookingFormData.value.length = 15
      Message.info('会议时长不能少于15分钟，已自动调整为15分钟')
    } else if (roomBookingFormData.value.length > 24 * 60) {
      roomBookingFormData.value.length = 24 * 60
      Message.info('会议时长不能超过24小时，已自动调整为24小时')
    }
  }
  showRoomBookingDurationModal.value = false
}

// 会议室预约结束时间选择相关变量
const roomBookingActiveEndPickerTab = ref('date')
const roomBookingEndDateYear = ref(Number(roomBookingFormData.value.endDate?.split('-')[0]) || dayjs().year())
const roomBookingEndDateMonth = ref(Number(roomBookingFormData.value.endDate?.split('-')[1]) || dayjs().month() + 1)
const roomBookingEndDateDay = ref(Number(roomBookingFormData.value.endDate?.split('-')[2]) || dayjs().date())
const roomBookingEndTimeHour = ref(Number(roomBookingFormData.value.endTimeOfDay?.split(':')[0]) || dayjs().hour())
const roomBookingEndTimeMinute = ref(Math.floor((Number(roomBookingFormData.value.endTimeOfDay?.split(':')[1]) || dayjs().minute()) / 5) * 5)

// 会议室预约开始时间相关计算属性
const roomBookingTempStartDateLabel = computed(() => {
  return `${roomBookingStartDateMonth.value}月${roomBookingStartDateDay.value}日`
})

const roomBookingTempStartTimeLabel = computed(() => {
  return `${String(roomBookingStartTimeHour.value).padStart(2, '0')}:${String(roomBookingStartTimeMinute.value).padStart(2, '0')}`
})

const roomBookingStartCalendarDays = computed(() => {
  const year = roomBookingStartDateYear.value
  const month = roomBookingStartDateMonth.value
  const daysInMonth = dayjs(`${year}-${month}`).daysInMonth()
  const firstDayOfWeek = dayjs(`${year}-${month}-01`).day()
  const today = dayjs()

  const days: any[] = []

  // 添加上个月的日期（占位）
  for (let i = 0; i < firstDayOfWeek; i++) {
    const prevDate = dayjs(`${year}-${month}-01`).subtract(firstDayOfWeek - i, 'day')
    days.push({
      key: `prev-${i}`,
      day: prevDate.format('D'),
      isDisabled: true
    })
  }

  // 添加本月的日期
  for (let day = 1; day <= daysInMonth; day++) {
    const currentDate = dayjs(`${year}-${month}-${day}`)
    const isDisabled = currentDate.isBefore(today, 'day')
    const isCurrent = currentDate.isSame(today, 'day')
    const isSelected = roomBookingStartDateDay.value === day

    days.push({
      key: `current-${day}`,
      day,
      isCurrent,
      isDisabled,
      isSelected
    })
  }

  return days
})

const roomBookingTempEndDateLabel = computed(() => {
  return `${roomBookingEndDateMonth.value}月${roomBookingEndDateDay.value}日`
})

const roomBookingTempEndTimeLabel = computed(() => {
  return `${String(roomBookingEndTimeHour.value).padStart(2, '0')}:${String(roomBookingEndTimeMinute.value).padStart(2, '0')}`
})

const roomBookingEndCalendarDays = computed(() => {
  const year = roomBookingEndDateYear.value
  const month = roomBookingEndDateMonth.value
  const firstDay = dayjs(`${year}-${month}-01`)
  const daysInMonth = firstDay.daysInMonth()
  const startWeekday = firstDay.day()

  const days: Array<{
    key: string
    day: string | number
    isCurrent: boolean
    isDisabled: boolean
    isSelected: boolean
  }> = []

  // 添加上个月的日期填充
  for (let i = 0; i < startWeekday; i++) {
    days.push({
      key: `prev-${i}`,
      day: '',
      isCurrent: false,
      isDisabled: true,
      isSelected: false
    })
  }

  // 添加当月的日期
  for (let day = 1; day <= daysInMonth; day++) {
    const currentDate = dayjs(`${year}-${month}-${day}`)
    const isSelected = roomBookingEndDateDay.value === day
    const isToday = currentDate.isSame(dayjs(), 'day')

    days.push({
      key: `current-${day}`,
      day,
      isCurrent: isToday,
      isDisabled: false,
      isSelected
    })
  }

  return days
})

// 会议室预约开始时间选择函数
const selectRoomBookingStartCalendarDay = (day: any) => {
  roomBookingStartDateDay.value = day.day
  const newDate = dayjs(`${roomBookingStartDateYear.value}-${roomBookingStartDateMonth.value}-${day.day}`)
  roomBookingFormData.value.startDate = newDate.format('YYYY-MM-DD')

  // 如果已有时间，更新完整的开始时间
  if (roomBookingFormData.value.startTimeOfDay) {
    updateRoomBookingStartTime()
  }
}

const confirmRoomBookingStartTime = () => {
  const startTime = `${String(roomBookingStartTimeHour.value).padStart(2, '0')}:${String(roomBookingStartTimeMinute.value).padStart(2, '0')}:00`
  roomBookingFormData.value.startTimeOfDay = startTime

  // 更新开始时间
  updateRoomBookingStartTime()

  showRoomBookingStartTimePicker.value = false
}

const selectRoomBookingEndCalendarDay = (day: any) => {
  roomBookingEndDateDay.value = day.day
  const newDate = dayjs(`${roomBookingEndDateYear.value}-${roomBookingEndDateMonth.value}-${day.day}`)
  roomBookingFormData.value.endDate = newDate.format('YYYY-MM-DD')
}

const confirmRoomBookingEndTime = () => {
  const endTime = `${String(roomBookingEndTimeHour.value).padStart(2, '0')}:${String(roomBookingEndTimeMinute.value).padStart(2, '0')}:00`
  roomBookingFormData.value.endTimeOfDay = endTime

  // 计算时长
  const startDateTime = dayjs(`${roomBookingFormData.value.startDate} ${roomBookingFormData.value.startTimeOfDay}`)
  const endDateTime = dayjs(`${roomBookingFormData.value.endDate} ${endTime}`)
  const duration = endDateTime.diff(startDateTime, 'minute')

  if (duration <= 0) {
    Message.error('结束时间必须晚于开始时间')
    return
  }

  if (duration < 15) {
    // 自动调整为15分钟
    const adjustedEndTime = startDateTime.add(15, 'minute')
    roomBookingFormData.value.endDate = adjustedEndTime.format('YYYY-MM-DD')
    roomBookingFormData.value.endTimeOfDay = adjustedEndTime.format('HH:mm:ss')
    roomBookingFormData.value.length = 15
    Message.info('会议时长不能少于15分钟，已自动调整为15分钟')
  } else if (duration > 24 * 60) {
    // 自动调整为24小时
    const adjustedEndTime = startDateTime.add(24, 'hour')
    roomBookingFormData.value.endDate = adjustedEndTime.format('YYYY-MM-DD')
    roomBookingFormData.value.endTimeOfDay = adjustedEndTime.format('HH:mm:ss')
    roomBookingFormData.value.length = 24 * 60
    Message.info('会议时长不能超过24小时，已自动调整为24小时')
  } else {
    roomBookingFormData.value.length = duration
  }

  showRoomBookingEndTimePicker.value = false
}

// 结束时间选择相关变量
const endTimeDisplay = computed(() => {
  if (formData.value.endDate && formData.value.endTimeOfDay) {
    const date = formData.value.endDate
    const week = getZhWeekday(date)
    const todayStr = isToday(date) ? '（今天）' : ''
    return `${dayjs(date).format('M月D日')} ${week}${todayStr} ${formData.value.endTimeOfDay}`
  }
  return '请选择结束时间'
})
const endDateYear = ref(Number(formData.value.endDate?.split('-')[0]) || dayjs().year())
const endDateMonth = ref(Number(formData.value.endDate?.split('-')[1]) || dayjs().month() + 1)
const endDateDay = ref(Number(formData.value.endDate?.split('-')[2]) || dayjs().date())
const endTimeHour = ref(Number(formData.value.endTimeOfDay?.split(':')[0]) || dayjs().hour())
const endTimeMinute = ref(Math.floor((Number(formData.value.endTimeOfDay?.split(':')[1]) || dayjs().minute()) / 5) * 5)
const tempEndDate = computed(() => `${endDateYear.value}-${endDateMonth.value.toString().padStart(2, '0')}-${endDateDay.value.toString().padStart(2, '0')}`)
const tempEndTime = computed(() => `${endTimeHour.value.toString().padStart(2, '0')}:${endTimeMinute.value.toString().padStart(2, '0')}`)
const tempEndDateLabel = computed(() => dayjs(tempEndDate.value).format('M月D日'))
const tempEndTimeLabel = computed(() => tempEndTime.value)
const endCalendarDays = computed(() => {
  const firstDay = dayjs(`${endDateYear.value}-${endDateMonth.value}-01`).day()
  const days = dayjs(`${endDateYear.value}-${endDateMonth.value}-01`).daysInMonth()
  const arr = []
  for (let i = 0; i < firstDay; i++) arr.push({ key: `empty-${i}`, day: '', isDisabled: true })
  for (let d = 1; d <= days; d++) {
    const dateStr = `${endDateYear.value}-${endDateMonth.value.toString().padStart(2, '0')}-${d.toString().padStart(2, '0')}`
    const isDisabled = dayjs(dateStr).isBefore(dayjs(formData.value.startDate), 'day')
    arr.push({
      key: dateStr,
      day: d,
      isCurrent: dateStr === dayjs().format('YYYY-MM-DD'),
      isDisabled,
      isSelected: d === endDateDay.value && endDateYear.value === Number(formData.value.endDate?.split('-')[0]) && endDateMonth.value === Number(formData.value.endDate?.split('-')[1])
    })
  }
  return arr
})
function selectEndCalendarDay(d) {
  if (!d.isDisabled) endDateDay.value = d.day
}
function selectEndHour(h) { endTimeHour.value = h }
function selectEndMinute(m) { endTimeMinute.value = m }
function confirmEndTime() {
  formData.value.endDate = tempEndDate.value
  formData.value.endTimeOfDay = tempEndTime.value
  showEndTimePicker.value = false
  showDurationPage.value = false // 选择后自动关闭时长选择页
  // 计算持续时间
  calculateDurationFromEndTime()
  // 修复：如果当前为周期参数设置，自动同步周期参数的 endDate
  if (showMobileSettingsModal.value && activeEndPickerTab.value === 'date') {
    cycleParams.value.endDate = formData.value.endDate
  }
}

function isMinuteDisabled(hour, minute, isStart = true) {
  // 只在今天且当前小时分钟之前禁用
  const todayStr = dayjs().format('YYYY-MM-DD')
  let compareDate, compareHour, compareMinute
  if (isStart) {
    compareDate = tempStartDate.value
    compareHour = hour
    compareMinute = minute
  } else {
    compareDate = tempEndDate.value
    compareHour = hour
    compareMinute = minute
  }
  if (compareDate !== todayStr) return false
  const nowHour = dayjs().hour()
  const nowMinute = dayjs().minute()
  // 小时小于当前小时全部禁用
  if (compareHour < nowHour) return true
  // 小时等于当前小时，分钟小于等于当前分钟的5分钟整倍数全部禁用
  if (compareHour === nowHour && compareMinute <= Math.floor(nowMinute / 5) * 5) return true
  return false
}

// 新增小时禁用判断
function isHourDisabled(hour, isStart = true) {
  const todayStr = dayjs().format('YYYY-MM-DD')
  let compareDate, compareHour
  if (isStart) {
    compareDate = tempStartDate.value
    compareHour = hour
  } else {
    compareDate = tempEndDate.value
    compareHour = hour
  }
  if (compareDate !== todayStr) return false
  const nowHour = dayjs().hour()
  if (compareHour < nowHour) return true
  return false
}

// 会议室预约时间限制函数
function isRoomBookingHourDisabled(hour) {
  const todayStr = dayjs().format('YYYY-MM-DD')
  const compareDate = `${roomBookingStartDateYear.value}-${String(roomBookingStartDateMonth.value).padStart(2, '0')}-${String(roomBookingStartDateDay.value).padStart(2, '0')}`

  if (compareDate !== todayStr) return false
  const nowHour = dayjs().hour()
  if (hour < nowHour) return true
  return false
}

function isRoomBookingMinuteDisabled(hour, minute) {
  const todayStr = dayjs().format('YYYY-MM-DD')
  const compareDate = `${roomBookingStartDateYear.value}-${String(roomBookingStartDateMonth.value).padStart(2, '0')}-${String(roomBookingStartDateDay.value).padStart(2, '0')}`

  if (compareDate !== todayStr) return false
  const nowHour = dayjs().hour()
  const nowMinute = dayjs().minute()

  // 小时小于当前小时全部禁用
  if (hour < nowHour) return true
  // 小时等于当前小时，分钟小于等于当前分钟的5分钟整倍数全部禁用
  if (hour === nowHour && minute <= Math.floor(nowMinute / 5) * 5) return true
  return false
}

// 新增：结束时间滚动定位ref
const hourListRef = ref<HTMLElement | null>(null)
const minuteListRef = ref<HTMLElement | null>(null)

// 自动滚动到选中的小时和分钟
const scrollToSelectedEndTime = () => {
  nextTick(() => {
    // 定位小时
    if (hourListRef.value) {
      const hourItems = hourListRef.value.children
      const hourIndex = hourList.findIndex((h) => h === endTimeHour.value)
      if (hourIndex >= 0 && hourItems[hourIndex]) {
        (hourItems[hourIndex] as HTMLElement).scrollIntoView({ block: 'center' })
      }
    }
    // 定位分钟
    if (minuteListRef.value) {
      const minuteItems = minuteListRef.value.children
      const minuteIndex = minuteList.findIndex((m) => m === endTimeMinute.value)
      if (minuteIndex >= 0 && minuteItems[minuteIndex]) {
        (minuteItems[minuteIndex] as HTMLElement).scrollIntoView({ block: 'center' })
      }
    }
  })
}

// 监听结束时间弹窗显示，自动滚动
watch(showEndTimePicker, (val) => {
  if (val) scrollToSelectedEndTime()
})

// 自动滚动到选中的开始时间小时和分钟
const scrollToSelectedStartTime = () => {
  nextTick(() => {
    // 定位小时
    if (hourListRef.value) {
      const hourItems = hourListRef.value.children
      const hourIndex = hourList.findIndex((h) => h === timeHour.value)
      if (hourIndex >= 0 && hourItems[hourIndex]) {
        (hourItems[hourIndex] as HTMLElement).scrollIntoView({ block: 'center' })
      }
    }
    // 定位分钟
    if (minuteListRef.value) {
      const minuteItems = minuteListRef.value.children
      const minuteIndex = minuteList.findIndex((m) => m === timeMinute.value)
      if (minuteIndex >= 0 && minuteItems[minuteIndex]) {
        (minuteItems[minuteIndex] as HTMLElement).scrollIntoView({ block: 'center' })
      }
    }
  })
}

// 监听开始时间弹窗显示，自动滚动
watch(showStartTimePicker, (val) => {
  if (val) scrollToSelectedStartTime()
})

const getZhWeekday = (dateStr: string) => {
  const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const d = dayjs(dateStr)
  return weekMap[d.day()]
}
const isToday = (dateStr: string) => dayjs(dateStr).isSame(dayjs(), 'day')

// 脚本部分新增变量和方法
const showMobileRoomSelector = ref(false)
const confirmMobileRoomSelection = () => {
  showMobileRoomSelector.value = false
  formData.value.meetRoomId = tempSelectedRoomId.value
  selectedRoomName.value = meetingRoomList.value.find((room) => room.id === tempSelectedRoomId.value)?.name || ''
}

watch(showMobileRoomSelector, (val) => {
  if (val) {
    // 确保打开选择器时能获取厂区数据
    setTimeout(() => {
      fetchFactories()
    }, 100)
  }
})

const showMobileSettingsModal = ref(false)
const isEditMode = ref(false)
const editConferenceId = ref('')
const showAllAttendees = ref(false)
const showAllAttendeesModal = ref(false)
const showSubMeetingModal = ref(false)
// ... existing code ...
// 统一PC端预约会议弹窗表单每一项的行间距

// ... existing code ...

// 新增微信授权跳转方法
const goToWechatAuth = () => {
  window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?response_type=code&appid=wx4219d3ae7422588b&redirect_uri=https://meeting.fortunesemic.com/api/regist/getUserDetails&scope=snsapi_privateinfo&agentid=1000202#wechat_redirect'
}

// ... existing code ...

const subMeetingList = ref<any[]>([])
const subMeetingColumns = ref<any[]>([
  {
    title: '会议主题',
    dataIndex: 'subject',
    key: 'subject'
  },
  {
    title: '开始时间',
    dataIndex: 'startTime',
    key: 'startTime'
  },
  {
    title: '结束时间',
    dataIndex: 'endTime',
    key: 'endTime'
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
    scopedSlots: { customRender: 'action' }
  }
])
const currentConferenceId = ref('')

const deleteSubMeeting = async (sub) => {
  // mediaTypes 兼容多种来源
  let mediaTypes = ''
  if (currentSubMeetingDetail.value) {
    // 优先 conferenceInfo
    if (currentSubMeetingDetail.value.conferenceInfo) {
      try {
        const info = JSON.parse(currentSubMeetingDetail.value.conferenceInfo)
        const types = (info.mediaTypes || info.mediaType || '').split(',')
        if (types.includes('HDVideo')) {
          mediaTypes = 'HDVideo'
        } else if (types.includes('Video')) {
          mediaTypes = 'Video'
        } else if (types.includes('Voice')) {
          mediaTypes = 'Voice'
        } else {
          mediaTypes = types[0] || 'Voice'
        }
      } catch {}
    }
    // 其次 mediaType 字段
    if (!mediaTypes && currentSubMeetingDetail.value.mediaType) {
      const types = String(currentSubMeetingDetail.value.mediaType).split(',')
      if (types.includes('HDVideo')) {
        mediaTypes = 'HDVideo'
      } else if (types.includes('Video')) {
        mediaTypes = 'Video'
      } else if (types.includes('Voice')) {
        mediaTypes = 'Voice'
      } else {
        mediaTypes = types[0] || 'Voice'
      }
    }
  }
  const params = {
    cycleSubConfID: sub.cycleSubConfID,
    mediaTypes,
    conferenceId: currentSubMeetingDetail.value?.conferenceId,
    userId: userId || ''
  }
  console.log('deleteSubMeeting 参数：', params)
  try {
    await http.post('/wecom/cancelSubMeet', params)
    Message.success('子会议已取消')
    // 刷新子会议列表
    await openSubMeetingModal({ conferenceId: currentSubMeetingDetail.value?.conferenceId })
    // 如果已无子会议，刷新主页会议列表
    if (!subMeetingList.value.length) {
      fatchMeetingList && fatchMeetingList()
    }
    // 新增：如果删除后子会议只剩1个或0个，直接回到会议列表界面
    if (subMeetingList.value.length <= 1) {
      showSubMeetingModal.value = false
      meetingSwitchValue.value = 1 // 切换回主会议列表
      fatchMeetingList && fatchMeetingList()
    }
  } catch (e) {
    console.error('接口调用失败', e?.response || e)
    Message.error('取消子会议失败')
  }
}

const submitEditSubMeeting = async () => {
  try {
    await http.post('/wecom/updateSubMeet', {
      cycleSubConfID: editSubForm.value.cycleSubConfID,
      mediaTypes: editSubForm.value.mediaTypes,
      conferenceId: editSubForm.value.conferenceId,
      startTime: editSubForm.value.startTime,
      length: editSubForm.value.length,
      userId: editSubForm.value.userId
    })
    Message.success('子会议已编辑')
    showEditSubModal.value = false
    // 刷新子会议列表
    openSubMeetingModal({ conferenceId: editSubForm.value.conferenceId })
  } catch (e) {
    Message.error('编辑子会议失败')
  }
}

const openSubMeetingModal = async (meeting) => {
  showSubMeetingModal.value = true
  currentConferenceId.value = meeting.conferenceId
  try {
    const res = await getMeetInfo(meeting.conferenceId, userId || '')
    if (res.data) {
      currentSubMeetingDetail.value = res.data // 缓存完整详情
      // 展平所有子会议
      if (res.data.subMeet && Array.isArray(res.data.subMeet)) {
        subMeetingList.value = res.data.subMeet.flatMap((monthGroup) => monthGroup.sub)
      } else {
        subMeetingList.value = []
      }
    } else {
      subMeetingList.value = []
    }
  } catch {
    subMeetingList.value = []
    Message.error('获取子会议失败')
  }
}

const editSubMeeting = (sub) => {
  // 取mediaTypes逻辑同删除
  let mediaTypes = ''
  if (currentSubMeetingDetail.value) {
    if (currentSubMeetingDetail.value.conferenceInfo) {
      try {
        const info = JSON.parse(currentSubMeetingDetail.value.conferenceInfo)
        const types = (info.mediaTypes || info.mediaType || '').split(',')
        if (types.includes('HDVideo')) {
          mediaTypes = 'HDVideo'
        } else if (types.includes('Video')) {
          mediaTypes = 'Video'
        } else if (types.includes('Voice')) {
          mediaTypes = 'Voice'
        } else {
          mediaTypes = types[0] || 'Voice'
        }
      } catch {}
    }
    if (!mediaTypes && currentSubMeetingDetail.value.mediaType) {
      const types = String(currentSubMeetingDetail.value.mediaType).split(',')
      if (types.includes('HDVideo')) {
        mediaTypes = 'HDVideo'
      } else if (types.includes('Video')) {
        mediaTypes = 'Video'
      } else if (types.includes('Voice')) {
        mediaTypes = 'Voice'
      } else {
        mediaTypes = types[0] || 'Voice'
      }
    }
  }
  editSubForm.value = {
    cycleSubConfID: sub.cycleSubConfID,
    mediaTypes,
    conferenceId: currentSubMeetingDetail.value?.conferenceId,
    startTime: sub.startTime,
    length: sub.length || 60,
    userId: userId || ''
  }
  showEditSubModal.value = true
}

const showEditSubModal = ref(false)
const editSubForm = ref({
  cycleSubConfID: '',
  mediaTypes: '',
  conferenceId: '',
  startTime: '',
  length: 30,
  userId: ''
})
const editSubOrigin = null

const currentSubMeetingDetail = ref(null)
</script>

<style lang="less" scoped>
.search-container {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;

  .search-item {
    padding: 8px 12px;
    transition: background 0.2s;

    &:hover {
      background: #f5f5f5;
    }
  }

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 12px;
    }

    .extra-info {
      display: flex;
      flex-direction: column;

      .mobile {
        font-size: 12px;
        color: #666;
      }
    }
  }
}
/* 隐藏整个复选框容器 */
.arco-tree-node .arco-tree-node-checkbox {
  display: none;
}

/* 仅为用户节点展示复选框 */
.arco-tree-node[data-type="user"] .arco-tree-node-checkbox {
  display: inline-block;
}

.name-box,
.date,
.promoter,
.participant {
  padding-bottom: 10px;
}

.form-checkbox {
  margin-top: 20px;
  /* 调整上方间距 */
  margin-bottom: 20px;
  /* 调整下方间距 */
}

/* 为会议室图片和选项调整样式 */
.meeting-room-option {
  display: flex;
  align-items: center;

  .room-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
  }

  span {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.large-image {
  width: 100%;
  /* 设置大图宽度适应模态框 */
  height: auto;
  /* 自动调整高度以保持比例 */
}

.room-image {
  width: 50px;
  /* 设置图片宽度，可以根据需要调整 */
  height: 50px;
  /* 设置图片高度，可以根据需要调整 */
  object-fit: cover;
  /* 保持图片比例并裁剪 */
  border-radius: 4px;
  /* 设置圆角 */
  flex-shrink: 0;
  /* 防止图片被压缩 */
}

.name-box {
  display: flex;
  justify-content: space-between;

  .name {
    font-weight: bold;
    flex: 1;
  }

  .status {
    font-weight: bold;
  }

  .status-0 {
    color: #ec7f39;
  }

  .status-1 {
    color: #008000;
  }

  .status-3 {
    color: #ff0000;
  }
}

.promoter,
.participant,
.location-info {
  color: #6c676b;
  font-size: 13px;
  padding-bottom: 10px;
}

.location-info::after {
  content: "";
  display: inline-block;
  width: 30px; /* 调整这个值以增加或减少间距 */
}

.occupancy-slot.occupied {
  background-color: #90caf9;
}

.noData {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arco-spin {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.pc {
  display: flex;
  height: 100vh;

  .container-l {
    background-color: #f7f7f7;
    width: 200px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;

    .btn {
      width: 100%;
    }
  }

  .container-r {
    background-color: #ffffff;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    .search-query {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 12px;

      :deep(.arco-form-item) {
        margin-bottom: 0;
      }

      :deep(.arco-input-wrapper) {
        height: 32px;
      }

      :deep(.arco-input) {
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        font-size: 14px;
      }

      .reset-btn {
        flex-shrink: 0;
        height: 32px;
        padding: 0 16px;
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        background: #fff;
        color: #666;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          border-color: #1890ff;
          color: #1890ff;
        }
      }
    }

    .meeting-list {
      flex: 1;
      overflow-y: auto;

      .title {
        color: #878986;
        padding: 15px 0;
        border-bottom: 2px solid #f6f6f6;
        font-weight: bold;
      }

      .meeting-item {
        padding: 15px 0;
        border-bottom: 2px solid #f9f9f9;

        .status {
          margin-right: 15px;
        }
      }
    }
  }
}

/* 预约会议按钮 */
.btn {
  width: 100%;
  margin-top: 35px;
}

.h5 {
  font-size: 17px;
  background-color: #ffffff;
  height: 100vh;
  padding: 10px;
  box-sizing: border-box;

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 确保里面的滚动有效 */
    // overflow-y: auto;
  }

  .meeting-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 90px;
  }

  .meeting-info {
    display: flex;

    .title {
      width: 60px;
      text-align: center;
      margin-right: 10px;
      margin-top: 20px;
      box-sizing: border-box;
    }

    .meeting {
      flex: 1;

      .meeting-item {
        background-color: #f8f8f8;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;

        .participant {
          padding: 0;
        }
      }
    }
  }
}

.date-selector {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  a-button {
    margin-right: 10px;
  }

  span {
    margin: 0 10px;
    font-size: 16px;
    font-weight: bold;
  }

  a-icon {
    cursor: pointer;
  }
}

.invite-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
    width: 100%;
  /* 确保整个组件不会超出 */
}

.selected-users {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}

.attendee-item {
  display: flex;
  align-items: center;
  padding: 6px 10px 6px 6px;
  background-color: #f7f7f7;
  border-radius: 20px;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  max-width: fit-content;

  &:hover {
    background-color: #f0f0f0;
  }
}

.attendee-avatar {
  width: 32px;
  height: 32px;
  border-radius: 0;
  margin-right: 0;
  min-width: 0;
  background: #fff;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.attendee-name {
  font-size: 14px;
  color: #333;
  max-width: 120px; /* 增加宽度，以避免名称过早被截断 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.remove-btn {
  padding: 0;
  margin-left: 8px;
  color: #999;
  line-height: 1;
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  :deep(.arco-icon) {
    font-size: 12px;
  }

  &:hover {
    color: #f56c6c;
    background-color: transparent;
  }
}

.no-attendees {
  padding: 12px 0;
  color: #999;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
}

.user-card {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  padding: 8px;
  border-radius: 4px;
  position: relative;
  width: calc(50% - 10px);
  margin-left: 20px;
  width: 90px;
  /* 确保两列显示 */
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 8px;
}

.user-name {
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* X 按钮 */
.delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s;
}

/* 鼠标悬停时显示 X */
.user-card:hover .delete-btn {
  opacity: 1;
}

.room-status {
  max-height: 400px;
  overflow-y: auto;
}

.room-status table {
  width: 100%;
  border-collapse: collapse;
}

.room-status th,
.room-status td {
  border: 1px solid #ddd;
  padding: 8px;
}

.timeline {
  height: 500px;
  width: 100%;
  overflow-y: auto;
}

.timeline-header {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  /* 增加与下方内容的间距 */
}

.hour-label {
  flex: 1 0 calc(100% / 24);
  /* 调整为24份以确保宽度固定 */
  text-align: center;
  font-weight: bold;
  padding: 10px 0;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
  font-size: 14px;
}

.timeline-container {
  margin-bottom: 40px;
}

.room-info {
  font-weight: bold;
  margin-bottom: 10px;
}

.timeline-bar {
  display: flex;
  height: 80px;
  border: 1px solid #ddd;
}

.occupancy-slot {
  flex: 1 0 calc(100% / 96);
  /* 确保每小时有4个格子 */
  height: 80px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.occupancy-slot.occupied {
  background-color: #90caf9;
  /* 已占用时的蓝色样式 */
}

.info-box {
    position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 10px;
  transform: translate(-50%, -100%);
  z-index: 10;

  /* 确保弹出框在其他内容之上 */
}

a-form {
  max-width: 100%;
  padding: 10px;
    box-sizing: border-box;

  .ant-form-item {
    margin-bottom: 20px;

    .ant-form-item-label {
      font-weight: 500;
      color: #1d2129;
      margin-bottom: 8px;
    }

    .ant-input,
    .ant-select,
    .ant-picker,
    .ant-input-number {
      width: 100%;
      border-radius: 4px;
      transition: all 0.2s;

      &:hover {
        border-color: #165DFF;
      }

      &:focus {
        border-color: #165DFF;
        box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
      }
    }
  }
}

/* 针对移动端输入框和选择器的调整 */
a-input,
a-select,
a-date-picker,
a-input-number {
  width: 100%;
  /* 让所有输入相关元素宽度自适应 */
  font-size: 16px;
  /* 增大字体以提高可读性 */
}

a-checkbox,
a-button {
  margin-top: 10px;
}

/* 添加移动端模态框样式 */
::v-deep .mobile-modal-wrap {
  .arco-modal {
    max-width: 100%;
    margin: 0 10px;

    &-content {
      padding: 16px;
      max-height: 70vh;
      overflow-y: auto;
    }
  }

  /* 表单元素优化 */
  .arco-form-item-label {
    font-size: 14px;
  }

  .arco-picker {
    width: 100%;
  }

  /* 会议室选项优化 */
  .meeting-room-option {
    flex-direction: column;
    align-items: flex-start;

    .room-image {
      width: 100%;
      height: 80px;
      margin-bottom: 8px;
    }
  }

  /* 周期选择优化 */
  .arco-checkbox-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;

    .arco-checkbox {
      margin-right: 0;
    }
  }
}

.icon-time {
  margin-left: 20px;
}

.mobile-custom-recurrence-modal-wrap :deep(.arco-modal) {
  max-width: 95vw !important;
  width: 95vw !important;
  margin: 4vh auto !important;
  top: 2vh !important;
}
.mobile-custom-recurrence-modal-wrap :deep(.arco-modal-body) {
  max-height: 75vh;
  overflow-y: auto;
  padding: 12px 8px 16px 8px !important;
  background: #f8f9fa;
}
/* 预约会议表单样式 */
:deep(.arco-modal-content) {
  padding: 24px;

  .arco-form {
    .arco-form-item {
      margin-bottom: 24px;

      .arco-form-item-label {
        font-weight: 500;
        color: #1d2129;
        margin-bottom: 8px;
      }

      .arco-input,
      .arco-select,
      .arco-picker,
      .arco-input-number {
        width: 100%;
        border-radius: 4px;
        transition: all 0.2s;

        &:hover {
          border-color: #165DFF;
        }

        &:focus {
          border-color: #165DFF;
          box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
        }
      }
    }
  }
}

/* 防止预约会议弹窗水平拖动 */
:deep(.arco-modal) {
  overflow-x: hidden;
  touch-action: pan-y;
}

/* 会议主题输入框特殊样式 */
.subject-input {
  :deep(.arco-input) {
    height: 40px;
    font-size: 16px;
  }
}

/* 时间选择器样式 */
.time-picker-group {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;

  :deep(.arco-form-item) {
    flex: 1;
    margin-bottom: 0;
  }
}

/* 周期会议设置区域 */
.recurring-meeting-section {
  background: #f7f8fa;
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;

  .section-title {
    font-weight: 500;
    color: #1d2129;
    margin-bottom: 16px;
  }
}
/* 会议类型选择器样式 */
.meeting-type-select {
  :deep(.arco-select-view) {
    height: 40px;

    .arco-select-view-value {
      line-height: 38px;
    }
  }
}

/* 会议室选择区域 */
.meeting-room-section {
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;

  .room-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;

    img {
      width: 60px;
      height: 60px;
      border-radius: 4px;
      object-fit: cover;
    }

    .room-info {
    flex: 1;

      .room-name {
        font-weight: 500;
        color: #1d2129;
      }

      .room-capacity {
        color: #86909c;
        font-size: 13px;
        margin-top: 4px;
      }
    }
  }
}

/* 与会人选择区域 */
.attendees-section {
  margin-top: 24px;

  .invite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .section-title {
      font-weight: 500;
      color: #1d2129;
    }
  }

  .selected-users {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 8px;

    .user-card {
      position: relative;
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background: #f7f8fa;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      transition: all 0.2s ease;
      margin: 0;
      width: auto;

      &:hover {
        background: #e8f3ff;
        border-color: #165DFF;

        .delete-btn {
          opacity: 1;
        }
      }

      .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
        object-fit: cover;
        border: 1px solid #e5e6eb;
      }

      .user-name {
        flex: 1;
        font-size: 14px;
        color: #1d2129;
        padding-right: 28px; /* 为删除按钮预留空间 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .delete-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255, 77, 79, 0.1);
        color: #ff4d4f;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: opacity 0.2s ease;
        font-size: 14px;

        &:hover {
          background: rgba(255, 77, 79, 0.2);
        }
      }
    }
  }
}

/* 表单底部按钮样式 */
.form-footer {
  margin-top: auto; // 将底部按钮固定在底部
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  text-align: right;
  background: #fff; // 确保底部背景色
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  :deep(.arco-modal-content) {
    padding: 16px;
  }

  .time-picker-group {
    flex-direction: column;
    gap: 8px;
  }

  .selected-users {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .attendees-section {
    .selected-users {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 8px;

      .user-card {
        padding: 6px 8px;

        .user-avatar {
          width: 28px;
          height: 28px;
          margin-right: 6px;
        }

        .user-name {
          font-size: 13px;
          margin-right: 20px;
        }

        .delete-btn {
          width: 18px;
          height: 18px;
          font-size: 12px;
        }
      }
    }
  }
}

/* 邀请与会人弹窗样式 */
.search-input {
  margin-bottom: 16px;
  width: 100%;
}

/* 邀请大屏表单项样式 */
.invite-screen-form-item {
  margin-bottom: 16px;
}

.invite-screen-row {
  display: flex;
  align-items: center;
}

.invite-screen-row .form-label {
  min-width: 60px;
  margin-right: 16px;
}

/* 移动端邀请大屏单选框样式 */
.radio-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  margin-left: 12px;
}

.radio-wrapper :deep(.arco-radio-group) {
  display: flex;
  gap: 20px; /* 增加间距，避免拥挤 */
  align-items: center;
}

.radio-wrapper :deep(.arco-radio) {
  margin-right: 0;
  font-size: 14px; /* 设置合适的字体大小 */
}

.radio-wrapper :deep(.arco-radio-label) {
  padding-left: 6px; /* 减少标签与单选框的距离 */
}

/* 邀请大屏专用的移动端表单行样式 */
.mobile-form-row.invite-screen-row {
  align-items: center;
  justify-content: space-between;
}

.mobile-form-row.invite-screen-row .form-label {
  width: 64px !important; /* 为"邀请大屏"提供足够宽度 */
  white-space: nowrap; /* 防止文字换行 */
  flex-shrink: 0; /* 防止标签被压缩 */
}

/* 移动端响应式优化 */
@media screen and (max-width: 375px) {
  .radio-wrapper :deep(.arco-radio-group) {
    gap: 16px; /* 在小屏幕上减少间距 */
  }

  .mobile-form-row.invite-screen-row .form-label {
    font-size: 13px; /* 在小屏幕上减小字体 */
  }
}

.invite-tree {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  :deep(.arco-modal) {
    width: 360px !important;
    max-width: 90vw !important;
  }

  .selected-users {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;

    .user-card {
      padding: 8px 12px;
      margin: 0;
      background: var(--color-fill-2);
      border-radius: 4px;
      display: flex;
      align-items: center;
      position: relative;

      .user-avatar {
        width: 32px;
        height: 32px;
        margin-right: 8px;
        flex-shrink: 0;
      }

      .user-name {
        font-size: 14px;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 36px;
      }

      .delete-btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(var(--red-6), 0.1);
        color: rgb(var(--red-6));
        border-radius: 50%;
        transition: all 0.2s;

        &:active {
          background: rgba(var(--red-6), 0.2);
        }
      }
    }
  }
}

.meeting-type-selector {
  margin-bottom: 24px;
  text-align: center;

  .ant-btn-group {
    .ant-btn {
      min-width: 120px;
      height: 40px;
  font-size: 16px;

      .anticon {
        margin-right: 8px;
      }
    }
  }
}

.location-selectors {
    display: flex;
  gap: 16px;
  margin-bottom: 24px;

  .location-item {
    flex: 1;
    margin-bottom: 0;
  }
}

.meeting-rooms-list {
  .section-title {
    font-weight: 500;
    color: #1d2129;
    margin-bottom: 16px;
  }

  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }

  .room-card {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #e5e6eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      border-color: #165DFF;
      background: #f7f8fa;
    }

    &.selected {
      border-color: #165DFF;
      background: #e8f3ff;
    }

    .room-image {
      width: 80px;
      height: 80px;
      margin-right: 16px;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
      }
    }

    .room-info {
      flex: 1;
      min-width: 0;

      .room-name {
        font-weight: 500;
        color: #1d2129;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .room-capacity {
        color: #86909c;
        font-size: 13px;
      }
    }
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .location-selectors {
    flex-direction: column;
    gap: 8px;
  }

  .meeting-rooms-list {
    .rooms-grid {
      grid-template-columns: 1fr;
    }

    .room-card {
      padding: 8px;

      .room-image {
        width: 60px;
        height: 60px;
        margin-right: 12px;
      }

      .room-info {
        .room-name {
          font-size: 14px;
        }

        .room-capacity {
          font-size: 12px;
        }
      }
    }
  }
}

.meeting-form {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  height: calc(100vh - 120px); // 调整高度，留出上下边距
  display: flex;
  flex-direction: column;
  overflow: hidden; // 防止内容溢出

  .form-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 16px; // 为滚动条预留空间
    margin-bottom: 24px; // 添加底部间距

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #e0e0e0;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 3px;
    }
  }

  .form-footer {
    margin-top: auto; // 将底部按钮固定在底部
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
    background: #fff; // 确保底部背景色
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .meeting-form {
    height: calc(100vh - 80px); // 移动端调整高度
    padding: 16px;

    .form-content {
      padding-right: 8px;
    }
  }
}

/* 月份日期选择器样式 */
.month-day-selector {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;

  .arco-checkbox-group {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px; /* 增加间距 */

    @media screen and (max-width: 768px) {
      grid-template-columns: repeat(4, 1fr);
    }

    /* 添加以下样式确保日期和"日"字在同一行 */
    .arco-checkbox {
      .arco-checkbox-label {
        white-space: nowrap;
        display: inline-block;
        font-size: 14px;
        letter-spacing: -0.5px; /* 稍微减少字符间距 */
        text-align: center; /* 文本居中 */
        min-width: 40px; /* 确保标签有最小宽度 */
      }

      /* 确保复选框本身和标签居中对齐 */
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      /* 为复选框添加适当边距和宽度 */
      padding: 6px 2px; /* 增加左右内边距 */
      background-color: #f9f9f9;
      border-radius: 4px;
      min-width: 46px; /* 设置最小宽度 */
      box-sizing: border-box;

      &:hover {
        background-color: #f0f0f0;
      }
    }
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 3px;
  }
}
/* 右上角历史会议按钮样式 */
.history-button-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
  margin-top: 20px; /* 添加顶部边距使按钮下移 */
  padding-right: 10px; /* 添加右侧边距 */
}

.history-btn {
  margin-left: auto;
  background-color: #f0f0f0; /* 灰色背景 */
  color: #333; /* 黑色字体 */
  border-radius: 16px; /* 稍微减小圆角 */
  border: none; /* 去掉边框线 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px; /* 进一步减小左右内边距 */
  height: 28px; /* 更小的高度 */
  font-size: 13px; /* 保持字体大小不变 */
}

.history-btn-text {
  margin-right: 5px;
}

.history-btn-arrow {
  font-size: 12px; /* 保持箭头大小不变 */
}

.history-btn:hover {
  background-color: #e0e0e0; /* 悬停时的背景色 */
  color: #333; /* 保持黑色字体 */
  border: none; /* 去掉边框线 */
}

/* 添加白色按钮样式 */
.white-btn {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: none !important;
}

.white-btn:hover {
  background-color: #f5f5f5 !important;
  color: #333333 !important;
  border: none !important;
}

/* 增加左侧按钮高度 */
.pc .container-l .btn {
  height: 48px !important;
  margin-top: 10px !important; /* 使用10px间距 */
  border: none !important;
}

/* 移动端按钮间距调整 */
.mobile .startApp-box .btn {
  margin-top: 10px !important; /* 使用10px间距 */
  border: none !important;
}

/* 覆盖全局按钮样式以减小间距 */
.btn {
  margin-top: 10px !important; /* 覆盖全局样式中的margin-top: 35px */
  border: none !important;
}

.attendees-search-container {
  position: relative;
  width: 100%;
}

.input-with-button {
  display: flex;
    gap: 8px;
  width: 100%;
  position: relative;
}

.search-input {
  flex: 1;
}

.search-results-dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  width: calc(100% - 44px);
  max-height: 300px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1001; /* 提高z-index确保在最上层 */
  margin-top: 4px;
}

.search-result-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-result-item:hover {
  background-color: #f5f5f5;
}

.user-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-option-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.add-attendee-btn {
  flex-shrink: 0;
}

.add-user-icon {
  width: 18px;
  height: 18px;
  filter: brightness(0.5); /* 将图标改为灰色 */
}

.selected-attendees {
  display: flex;
    flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 8px;
  width: 100%;
}

.attendee-item {
  display: flex;
  align-items: center;
  padding: 6px 10px 6px 6px;
  background-color: #f7f7f7;
  border-radius: 20px;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  max-width: fit-content;

  &:hover {
    background-color: #f0f0f0;
  }
}

.attendee-avatar {
  width: 32px;
  height: 32px;
  border-radius: 0;
  margin-right: 0;
  min-width: 0;
  background: #fff;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.attendee-name {
  font-size: 14px;
  color: #333;
  max-width: 120px; /* 增加宽度，以避免名称过早被截断 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.remove-btn {
  padding: 0;
  margin-left: 8px;
  color: #999;
  line-height: 1;
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  :deep(.arco-icon) {
    font-size: 12px;
  }

  &:hover {
    color: #f56c6c;
    background-color: transparent;
  }
}

.no-attendees {
  padding: 12px 0;
  color: #999;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
}
/* 添加参会人输入区域的样式 */
.attendees-input {
  width: 100%;
  display: block;

  :deep(.arco-form-item-content-wrap) {
    width: 100%;
    display: block;
  }

  :deep(.arco-form-item-content) {
    display: block;
  }

  .attendees-search-container {
    margin-bottom: 12px;
    width: 100%;
    display: block;
  }

  .attendees-list-wrapper {
    width: 100%;
    display: block;
    margin-top: 8px;
    padding-left: 60px; /* 右移，与输入框左对齐 */
    box-sizing: border-box;
  }

  .selected-attendees {
    margin-top: 12px;
    margin-left: 0; /* 去除多余左边距 */
    width: 100%;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    box-sizing: border-box;
    padding-left: 0; /* 保持与wrapper一致，避免重复缩进 */
  }
}

.no-results {
  padding: 12px;
  text-align: center;
  color: #999;
}

.modal-search-results {
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.status-action-wrapper {
  display: flex;
  align-items: center;
}

.more-btn {
  margin-left: 8px;
  padding: 0 4px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 添加灰色按钮样式 */
.gray-btn {
  background-color: #f0f0f0 !important;
  color: #333333 !important;
  border: none !important;
  margin-right: 8px;
}

.gray-btn:hover {
  background-color: #e0e0e0 !important;
  color: #333333 !important;
  border: none !important;
}

.end-date-picker {
  width: 100px !important;
}

/* 深度选择器覆盖Arco Design组件样式 */
.end-date-picker:deep(.arco-picker) {
  width: 100px !important;
  max-width: 100px !important;
}

.hint-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  position: relative;
  top: 2px;
}

.cycle-hint {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  cursor: pointer;
  line-height: 1;
}

.cycle-end-date-tip {
  padding: 8px;
  color: #1d2129;
  font-size: 14px;
}

.mobile-bottom-buttons {
  position: fixed;
  bottom: 40px;
  left: 0;
  right: 0;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 1000;

  .btn {
  flex: 1;
    height: 70px;
  display: flex;
    flex-direction: column;
  align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    border: none;
    padding: 0;
    margin: 0;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;

    span {
      color: #fff !important;
      font-size: 13px;
      margin-top: 6px;
}

    .arco-icon {
      color: #fff !important;
      font-size: 28px;
}

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
    }
}

  .schedule-btn {
    &::before {
      background: linear-gradient(135deg, #2E71FF, #80B3FF);
    }
    &:hover::before {
      background: linear-gradient(135deg, #1a5eff, #66a3ff);
    }
}

  .room-booking-btn {
    &::before {
      background: linear-gradient(135deg, #FFB800, #FFD700);
    }
    &:hover::before {
      background: linear-gradient(135deg, #E6A600, #FFC700);
    }
  }

  .start-app-btn {
    &::before {
      background: linear-gradient(135deg, #8c8c8c, #B3B3B3);
    }
    &:hover::before {
      background: linear-gradient(135deg, #737373, #999999);
    }
  }

  .wechat-auth-btn {
    &::before {
      background: linear-gradient(135deg, #07C160, #6DD400);
    }
    &:hover::before {
      background: linear-gradient(135deg, #06AD56, #5CBA00);
    }
  }
}

.mobile-container {
  padding-bottom: 100px;
}

.mobile {
  .mobile-container {
    padding: 12px;
    padding-bottom: 100px; // 为底部按钮留出空间
}

  .search-box {
  display: flex;
  align-items: center;
    gap: 8px;
    margin-bottom: 12px;

    .btn {
      height: 40px;
      padding: 0 16px;
      border: 1px solid #2E71FF;
      background: none;
      color: #2E71FF;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      border-radius: 4px;
    }
}

  .mobile-bottom-buttons {
    position: fixed;
    bottom: 40px;
    left: 0;
    right: 0;
    padding: 12px 16px;
  display: flex;
    justify-content: space-between;
    gap: 12px;
    background: none;
    box-shadow: none;

    .btn {
      flex: 1;
      height: 70px;
      border-radius: 12px;
  display: flex;
      flex-direction: column;
  align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      color: #333;
      font-size: 13px;
      position: relative;
  overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: none;
        z-index: -1;
}

      .icon {
        font-size: 28px;
        margin-bottom: 6px;
        color: #333;
}

      &.schedule-btn {
        flex: 4;
        .icon {
          color: #2E71FF;
  }
}

      &.room-booking-btn {
        flex: 3;
        .icon {
          color: #FFB800;
        }
      }

      &.start-app-btn {
        flex: 3;
        .icon {
          color: #8c8c8c;
}
      }
    }
  }
}

.search-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  margin: 20px 0;

  .arco-input-search {
    flex: 1;
    margin-right: 12px;

    :deep(.arco-input-wrapper) {
      height: 32px;
    }

    :deep(.arco-input) {
      height: 32px;
      line-height: 30px;
    }

    :deep(.arco-input-suffix) {
      height: 32px;
      display: flex;
      align-items: center;
    }
  }
}

.right-btn {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.reset-btn-mobile {
  white-space: nowrap;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: #666;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background: #e8e8e8;
    border-color: #ccc;
  }
}

.history-btn {
  white-space: nowrap;
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #e5e6eb;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

// 在样式部分添加移动端会议项可点击样式
.h5 {
  .meeting-item {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;

    &::after {
      content: '';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      border-top: 2px solid #ccc;
      border-right: 2px solid #ccc;
      transform: translateY(-50%) rotate(45deg);
    }

    &:active {
      background-color: #f5f5f5;
    }
  }
}

.attendees-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  position: relative;

  .form-label {
    margin-right: 12px;
    white-space: nowrap;
  }
  .search-input-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
  }
  .search-input-container {
    flex: 1;
    min-width: 0;
  }
  .add-attendee-btn {
    margin-left: 0;
    flex-shrink: 0;
  }
}

.date-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  .form-label {
    min-width: 40px;
    margin-right: 12px;
    white-space: nowrap;
  }
  .datetime-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    .date-picker, .time-picker {
      flex: none;
      min-width: 120px;
      max-width: 160px;
    }
  }
  .picker-container {
    flex: 1;
    min-width: 0;
  }
}

.menu-three-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-left: 8px;
  vertical-align: middle;
}

.mobile-attendees-bar {
  width: 100vw !important;
  min-height: 48px;
  background: #fff !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  padding: 0 16px !important;
  box-sizing: border-box;
  margin: 0 !important;
  position: relative;
  left: 0 !important;
  transform: none !important;
  justify-content: flex-start;
  overflow-x: auto;
  gap: 12px;
}
.subject-input {
  background: #f5f5f5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  margin-bottom: 16px !important;
  border: none !important;
}

.subject-input :deep(.arco-input-suffix) {
  display: none !important;
}
.subject-input-wrapper {
  position: relative;
}
.clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #bbb;
  z-index: 2;
}
.attendees-label {
  color: #333;
  font-size: 15px;
  font-weight: 500;
  margin-right: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.attendees-avatars {
  display: flex;
  align-items: center;
  justify-content: flex-end !important;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
}
.attendee-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 0 !important;
  object-fit: cover;
  background: #fff;
  border: 1px solid #eee;
}
.attendee-name {
  font-size: 14px;
  color: #333;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-user-selector-fullpage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}
.selector-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.selected-users-bar {
  display: flex;
  align-items: center;
  padding: 8px;
  overflow-x: auto;
  background: #f7f7f7;
  border-top: 1px solid #eee;
}
.avatar-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
}
.selector-footer {
  padding: 12px;
  border-top: 1px solid #eee;
  background: #fff;
  text-align: right;
}

.subject-input {
  background: #f5f5f5;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 16px;
}
// 隐藏字数提示
.subject-input :deep(.arco-input-suffix) {
  display: none !important;
}

.subject-input-wrapper {
  position: relative;
}
.clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #bbb;
  z-index: 2;
}
// 强制去除会议主题输入框边框（移动端全屏预约页）

.attendees-input {
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

.attendees-avatars {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}
.attendees-ellipsis {
  color: #888;
  font-size: 14px;
  margin-right: 8px;
  white-space: nowrap;
}
.attendee-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1px solid #eee;
}

.mobile-time-select-row {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
  font-size: 16px;
  cursor: pointer;
}
.time-label {
  color: #333;
  font-weight: 500;
  margin-right: 18px;
}
.time-value {
  color: #2E71FF;
  font-size: 16px;
}
.mobile-datetime-picker-mask {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: 0;
  background: rgba(30,30,30,0.6);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mobile-datetime-picker-panel {
  width: 100vw;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 16px 24px 16px;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
}
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}
.picker-confirm-btn {
  color: #2E71FF;
  font-size: 16px;
  font-weight: 500;
}
.picker-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.mobile-bottom-picker-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* 允许子元素可点 */
  pointer-events: auto;
}
.mobile-bottom-picker {
  width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 0 24px 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  z-index: 10000;
  pointer-events: auto;
}
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px 12px 24px;
  border-bottom: 1px solid #f0f0f0;
}
.picker-cancel, .picker-confirm {
  color: #1677ff;
  font-size: 16px;
  cursor: pointer;
}
.picker-title {
  font-weight: 500;
  font-size: 16px;
}
.picker-body {
  display: flex;
  justify-content: space-between;
  padding: 24px 24px 0 24px;
  gap: 12px;
}
.picker-date, .picker-time {
  font-size: 16px;
  padding: 8px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  width: 48%;
  background: #f7f8fa;
  color: #333;
  outline: none;
}
.picker-date:active, .picker-time:active, .picker-date:focus, .picker-time:focus {
  border-color: #1677ff;
}
.picker-top-tabs {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px 0 24px;
  gap: 12px;
}
.picker-tab {
  flex: 1;
  background: #f7f8fa;
  border-radius: 8px 8px 0 0;
  padding: 12px 0 8px 0;
  text-align: center;
  cursor: pointer;
  border: 1px solid #e5e5e5;
  border-bottom: none;
  color: #888;
  font-size: 15px;
  transition: all 0.2s;
}
.picker-tab.active {
  background: #fff;
  color: #1677ff;
  border-bottom: 2px solid #1677ff;
  font-weight: 500;
}
.picker-tab-value {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
}
.picker-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 24px 0 24px;
  min-height: 120px;
}
.picker-date-full, .picker-time-full {
  width: 100%;
  font-size: 18px;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #f7f8fa;
  color: #333;
  outline: none;
}
.picker-date-full:active, .picker-time-full:active, .picker-date-full:focus, .picker-time-full:focus {
  border-color: #1677ff;
}

.picker-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 12px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.picker-tabs-center {
  display: flex;
  gap: 8px;
  align-items: center;
}
.picker-tab {
  min-width: 70px;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 6px 8px 2px 8px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #e5e5e5;
  color: #888;
  font-size: 15px;
  transition: all 0.2s;
}
.picker-tab.active {
  background: #fff;
  color: #1677ff;
  border: 1.5px solid #1677ff;
  font-weight: 500;
}
.picker-tab-value {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 500;
}
.picker-body-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0 0 0;
  min-height: 120px;
}
.scroll-picker-row {
  display: flex;
  gap: 12px;
}
.scroll-picker-col {
  font-size: 18px;
  padding: 12px 8px;
  border-radius: 8px;
  background: #f7f8fa;
  color: #333;
  outline: none;
  border: 1px solid #e5e5e5;
  min-width: 80px;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
}
.scroll-picker-col:focus {
  border-color: #1677ff;
}

.mobile-bottom-picker-new {
  width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  padding-bottom: 16px;
}
.picker-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 12px 16px 0 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.picker-tabs-bar {
  display: flex;
  background: #f7f8fa;
  border-radius: 16px;
  overflow: hidden;
  flex: 1;
  margin: 0 12px;
}
.picker-tab-bar {
  flex: 1;
  text-align: center;
  padding: 8px 0 6px 0;
  font-size: 16px;
  color: #888;
  background: #f7f8fa;
  cursor: pointer;
  transition: all 0.2s;
}
.picker-tab-bar.active {
  background: #fff;
  color: #1677ff;
  font-weight: 500;
}
.picker-confirm-bar {
  color: #1677ff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 8px;
}
.picker-content-bar {
  padding: 0 0 0 0;
}
.calendar-bar {
  padding: 0;
}
.calendar-bar-week,
.calendar-bar-days {
  width: 100%;
  margin: 0;
  padding: 0;
}
.calendar-bar-header {
  text-align: center;
  font-size: 15px;
  color: #333;
  margin: 12px 0 8px 0;
}
.calendar-bar-week {
  display: flex;
  justify-content: space-between;
  color: #bbb;
  font-size: 13px;
  margin-bottom: 4px;
}
.calendar-bar-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.calendar-day {
  width: calc(100% / 7);
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  padding: 6px 0;
  font-size: 15px;
  color: #333;
  border-radius: 50%;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.2s, color 0.2s;
}
.calendar-day.current {
  border: 1.5px solid #1677ff;
}
.calendar-day.selected {
  background: #1677ff;
  color: #fff;
}
.calendar-day.disabled {
  color: #ccc;
  background: none;
  cursor: not-allowed;
}
.time-scroll-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 32px 0 0 0;
}
.time-scroll-col {
  width: 60px;
  height: 160px;
  overflow-y: auto;
  background: #f7f8fa;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scrollbar-width: none;
}
.time-scroll-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.time-scroll-item {
  text-align: center;
  font-size: 20px;
  color: #333;
  padding: 10px 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.time-scroll-item.selected {
  background: #1677ff;
  color: #fff;
  font-weight: 500;
}

.mobile-start-time-bar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.start-time-label {
  color: #1d2129;
  font-size: 15px;
  font-weight: 500;
  margin-left: 16px;
}
.mobile-date-time-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 16px;
}
.mobile-date-block, .mobile-time-block {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  min-width: 70px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}
.mobile-date-block:active, .mobile-time-block:active {
  background: #e0e0e0;
}

.mobile-duration-bar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 12px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}
.duration-label {
  color: #888;
}
.duration-value {
  color: #333;
  font-weight: 500;
}
.duration-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.duration-option {
  padding: 12px;
  border-radius: 8px;
  background: #f7f8fa;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.duration-option.selected {
  background: #165dff;
  color: #fff;
  font-weight: bold;
}
.duration-options-full {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 24px;
}
.duration-option-full {
  padding: 18px;
  border-radius: 12px;
  background: #f7f8fa;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-weight: 500;
}
.duration-option-full.selected {
  background: #165dff;
  color: #fff;
  font-weight: bold;
}
.time-scroll-item.disabled {
  color: #ccc !important;
  background: #f5f5f5 !important;
  cursor: not-allowed !important;
}

.mobile-room-selector-fullpage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.location-selectors-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  .location-select {
    flex: 1;
    min-width: 0;
  }
}

.mobile-settings-modal-wrap {
  z-index: 9999 !important;
  position: relative;

  :deep(.ant-modal) {
    z-index: 9999 !important;
    position: relative;
  }
}

/* 移动端预约会议弹窗样式 */
.mobile-schedule-modal-wrap {
  z-index: 1000;
}

/* 移动端会议室预约弹窗样式 */
.mobile-room-booking-modal-wrap {
  z-index: 1000;

  :deep(.arco-modal) {
    max-height: 95vh !important;
    margin: 2.5vh auto !important;
    width: 95vw !important;
    max-width: 95vw !important;
  }

  :deep(.arco-modal-body) {
    padding: 0 !important;
    background: #f8f9fa;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .mobile-schedule-content {
    background: #f8f9fa;
    min-height: auto;
    padding-bottom: 100px; /* 为底部按钮留出更多空间 */
  }

  .mobile-form-footer {
    background: white;
    margin-top: 0;
    border-top: 1px solid #f0f0f0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  }

  /* 确保模态框内容不会被底部按钮遮挡 */
  :deep(.arco-modal-container) {
    padding-bottom: 0 !important;
  }
}

/* 会议室预约弹窗现在使用全局预约会议样式，无需专用样式 */

/* 移动端会议室预约弹窗内容样式 - 继续之前的定义 */
.mobile-room-booking-modal-wrap {
  .mobile-schedule-content {
    .mobile-form-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;
      padding: 12px 0;
      border-bottom: 1px solid #f2f3f5;

      &:last-child {
        border-bottom: none;
      }

      .form-label {
        min-width: 80px;
        margin-right: 16px;
        font-weight: 500;
        color: #1d2129;
        line-height: 32px;
        flex-shrink: 0;
      }

      .input-wrapper, .attendees-wrapper, .datetime-wrapper,
      .duration-wrapper, .location-wrapper, .radio-wrapper,
      .reminder-wrapper, .recurrence-wrapper, .setting-wrapper,
      .select-wrapper {
        flex: 1;
      }
    }
  }
}

/* 移动端会议室预约弹窗内容样式 */
.mobile-room-booking-modal-wrap {
  .mobile-schedule-content {
    .mobile-form-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;
      padding: 12px 0;
      border-bottom: 1px solid #f2f3f5;

      &:last-child {
        border-bottom: none;
      }

      .form-label {
        min-width: 80px;
        margin-right: 16px;
        font-weight: 500;
        color: #1d2129;
        line-height: 32px;
        flex-shrink: 0;
      }

      .input-wrapper, .attendees-wrapper, .datetime-wrapper,
      .duration-wrapper, .location-wrapper, .radio-wrapper,
      .reminder-wrapper, .recurrence-wrapper, .setting-wrapper,
      .select-wrapper {
        flex: 1;
      }
    }
  }

  /* 会议室选择相关样式 */
  .no-rooms-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;

    p {
      margin: 8px 0;
    }
  }

  /* 时间选择器样式 */
  .time-picker-group {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;

    :deep(.arco-form-item) {
      flex: 1;
      margin-bottom: 0;
    }
  }

  /* 周期会议设置区域 */
  .recurring-meeting-section {
    background: #f7f8fa;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;

    .section-title {
      font-weight: 500;
      color: #1d2129;
      margin-bottom: 16px;
    }
  }

  /* 会议类型选择器样式 */
  .meeting-type-select {
    :deep(.arco-select-view) {
      height: 40px;

      .arco-select-view-value {
        line-height: 38px;
      }
    }
  }

  /* 会议室选择区域 */
  .meeting-room-section {
    border: 1px solid #e5e6eb;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;

    .room-preview {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 8px;

      img {
        width: 60px;
        height: 40px;
        object-fit: cover;
        border-radius: 4px;
      }

      .room-info {
        .room-name {
          font-weight: 500;
          color: #1d2129;
        }

        .room-capacity {
          font-size: 12px;
          color: #86909c;
          margin-top: 2px;
        }
      }
    }
  }

  /* 参会人搜索行样式 */
  .attendees-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;

    .form-label {
      margin-right: 12px;
      white-space: nowrap;
    }
    .search-input-btn-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }
    .search-input-container {
      flex: 1;
      min-width: 0;
    }
    .add-attendee-btn {
      margin-left: 0;
      flex-shrink: 0;
    }
  }

  /* 时间选择行样式 */
  .date-time-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    .form-label {
      min-width: 40px;
      margin-right: 12px;
      white-space: nowrap;
    }
    .datetime-container {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      .date-picker, .time-picker {
        flex: none;
        min-width: 120px;
        max-width: 160px;
      }
    }
    .picker-container {
      flex: 1;
    }
  }

  /* 地点输入行样式 */
  .location-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    .form-label {
      min-width: 40px;
      margin-right: 12px;
      white-space: nowrap;
    }
    .location-input-right {
      flex: 1;
      position: relative;
    }
    .clear-location-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      padding: 0;
      min-width: auto;
      width: 20px;
      height: 20px;
      &:hover {
        background-color: #f53f3f;
        color: white;
      }
    }
  }

  /* 媒体类型和提醒行样式 */
  .media-type-row, .reminder-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    .form-label {
      min-width: 80px;
      margin-right: 12px;
      white-space: nowrap;
    }
  }

  /* 清除按钮样式 */
  .clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #86909c;
    font-size: 16px;
    z-index: 1;
    &:hover {
      color: #1d2129;
    }
  }

  /* 搜索结果下拉框样式 */
  .search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e6eb;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;

    .search-result-item {
      padding: 8px 12px;
      cursor: pointer;
      border-bottom: 1px solid #f2f3f5;

      &:hover {
        background-color: #f7f8fa;
      }

      &:last-child {
        border-bottom: none;
      }

      .user-option {
        display: flex;
        align-items: center;
        gap: 8px;

        .user-option-avatar {
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
      }
    }

    .no-results {
      padding: 12px;
      text-align: center;
      color: #86909c;
    }
  }

  /* 已选参会人样式 */
  .selected-attendees {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .attendee-item {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      background-color: #f7f8fa;
      border: 1px solid #e5e6eb;
      border-radius: 16px;
      font-size: 12px;

      .attendee-avatar {
        width: 20px;
        height: 20px;
        margin-right: 6px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .attendee-name {
        margin-right: 6px;
        color: #1d2129;
      }

      .remove-btn {
        padding: 0;
        min-width: auto;
        width: 16px;
        height: 16px;
        border-radius: 50%;

        &:hover {
          background-color: #f53f3f;
          color: white;
        }
      }
    }

    .attendee-more-btn {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      background-color: #e8f3ff;
      border: 1px solid #bedaff;
      border-radius: 16px;
      font-size: 12px;
      color: #0e7eff;
      cursor: pointer;

      &:hover {
        background-color: #bedaff;
      }
    }
  }

  .mobile-schedule-content {
    .mobile-form-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;
      padding: 12px 0;
      border-bottom: 1px solid #f2f3f5;

      &:last-child {
        border-bottom: none;
      }

      .form-label {
        min-width: 80px;
        margin-right: 16px;
        font-weight: 500;
        color: #1d2129;
        line-height: 32px;
        flex-shrink: 0;
      }

      .input-wrapper, .attendees-wrapper, .datetime-wrapper,
      .duration-wrapper, .location-wrapper, .radio-wrapper,
      .reminder-wrapper, .recurrence-wrapper {
        flex: 1;

        .a-input, .a-select, .a-button {
          width: 100%;
        }
      }

      .attendees-wrapper {
        .attendees-search-container {
          margin-bottom: 12px;

          .mobile-search-results {
            margin-top: 8px;
            border: 1px solid #e5e6eb;
            border-radius: 6px;
            background: white;
            max-height: 150px;
            overflow-y: auto;

            .mobile-search-result-item {
              display: flex;
              align-items: center;
              padding: 8px 12px;
              cursor: pointer;
              border-bottom: 1px solid #f2f3f5;

              &:hover {
                background-color: #f7f8fa;
              }

              &:last-child {
                border-bottom: none;
              }

              .user-avatar {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                margin-right: 8px;
              }
            }
          }
        }

        .mobile-selected-attendees {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;

          .mobile-attendee-tag {
            display: flex;
            align-items: center;
            padding: 4px 8px;
            background-color: #f7f8fa;
            border: 1px solid #e5e6eb;
            border-radius: 12px;
            font-size: 12px;

            span {
              margin-right: 4px;
              color: #1d2129;
            }

            .arco-icon {
              cursor: pointer;
              color: #86909c;

              &:hover {
                color: #f53f3f;
              }
            }
          }
        }
      }

      .datetime-wrapper {
        display: flex;
        gap: 8px;

        .mobile-date-picker, .mobile-time-picker {
          flex: 1;
        }
      }

      .radio-wrapper {
        .arco-radio-group {
          display: flex;
          gap: 16px;
        }
      }
    }

    .mobile-form-footer {
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid #f2f3f5;

      .mobile-bottom-buttons {
        display: flex;
        gap: 12px;

        .mobile-cancel-btn, .mobile-confirm-btn {
          flex: 1;
          height: 40px;
        }

        .mobile-cancel-btn {
          background-color: #f7f8fa;
          border-color: #e5e6eb;
          color: #1d2129;
        }

        .mobile-confirm-btn {
          background-color: #165dff;
          border-color: #165dff;
          color: white;

          &:disabled, &.is-disabled {
            background-color: #d9d9d9 !important;
            border-color: #d9d9d9 !important;
            color: #999 !important;
            cursor: not-allowed !important;
            opacity: 0.6 !important;
            pointer-events: none !important;

            &:hover, &:active, &:focus {
              background-color: #d9d9d9 !important;
              border-color: #d9d9d9 !important;
              color: #999 !important;
              box-shadow: none !important;
              transform: none !important;
            }
          }
        }
      }
    }
  }
}

/* 会议服务样式 */
.meeting-service-section {
  margin-top: 16px;
}

.meeting-service-section .form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #1d2129;
}

.service-content {
  border: 1px solid #e5e6eb;
  border-radius: 6px;
  padding: 12px;
  background-color: #f7f8fa;
}

.service-selection {
  max-height: 200px;
  overflow-y: auto;
}

.service-item {
  margin-bottom: 12px;
  padding: 8px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #e5e6eb;
}

.service-item:last-child {
  margin-bottom: 0;
}

.service-info {
  margin-left: 8px;
}

.service-name {
  display: block;
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 4px;
}

.service-category {
  display: inline-block;
  padding: 2px 8px;
  background-color: #e8f4ff;
  color: #2e71ff;
  border-radius: 12px;
  font-size: 12px;
  margin-right: 8px;
}

.service-person {
  font-size: 12px;
  color: #86909c;
}

.service-remark-input {
  margin-top: 8px;
  margin-left: 24px;
}

/* 服务选择按钮样式 */
.service-button-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-select-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d9d9d9;
  color: #666;
}

.service-select-btn:hover {
  border-color: #2e71ff;
  color: #2e71ff;
}

.service-count {
  color: #2e71ff;
  font-weight: 500;
}

/* 服务弹窗样式 */
.service-modal-content {
  max-height: 600px;
  overflow-y: auto;
  padding: 8px;
}

.service-list-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-modal-item {
  padding: 20px;
  border: 1px solid #e5e6eb;
  border-radius: 12px;
  transition: all 0.2s;
  margin-bottom: 8px;
}

.service-modal-item:last-child {
  margin-bottom: 0;
}

.service-modal-item:hover {
  border-color: #2e71ff;
  box-shadow: 0 4px 12px rgba(46, 113, 255, 0.15);
}

.service-modal-item.selected {
  border-color: #2e71ff;
  background-color: #f0f7ff;
  box-shadow: 0 4px 12px rgba(46, 113, 255, 0.15);
}

.service-checkbox {
  width: 100%;
}

.service-checkbox :deep(.arco-checkbox) {
  align-self: flex-start;
  margin-top: 2px;
}

.service-modal-info {
  margin-left: 8px;
}

.service-modal-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.service-modal-name {
  font-weight: 500;
  font-size: 16px;
  color: #1d2129;
  line-height: 1.4;
  word-break: break-word;
}

.service-modal-category {
  display: inline-block;
  padding: 4px 12px;
  background-color: #e8f4ff;
  color: #2e71ff;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  width: fit-content;
}

.service-modal-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: #86909c;
}

.service-modal-person,
.service-modal-factory {
  font-size: 14px;
  color: #86909c;
  line-height: 1.4;
  word-break: break-word;
}

.service-modal-remark {
  margin-top: 12px;
  margin-left: 24px;
}

/* 移动端会议服务样式 */
.mobile-service-section {
  margin-top: 16px;
  padding: 16px;
  background-color: #f7f8fa;
  border-radius: 8px;
}

.mobile-form-label {
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 12px;
  display: block;
}

.mobile-service-content {
  background-color: #ffffff;
  border-radius: 6px;
  padding: 12px;
}

.mobile-service-selection {
  max-height: 180px;
  overflow-y: auto;
}

.mobile-service-item {
  margin-bottom: 12px;
  padding: 12px;
  background-color: #f7f8fa;
  border-radius: 6px;
}

.mobile-service-item:last-child {
  margin-bottom: 0;
}

.mobile-service-info {
  margin-left: 8px;
}

.mobile-service-name {
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 6px;
  display: block;
}

.mobile-service-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-service-category {
  display: inline-block;
  padding: 2px 8px;
  background-color: #e8f4ff;
  color: #2e71ff;
  border-radius: 12px;
  font-size: 12px;
  width: fit-content;
}
.mobile-service-person {
  font-size: 12px;
  color: #86909c;
}

.mobile-service-remark-input {
  margin-top: 8px;
  margin-left: 24px;
}

/* 移动端服务选择按钮样式 */
.mobile-service-button-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-service-select-btn {
  width: 100%;
  height: 44px;
  border: 1px dashed #d9d9d9;
  color: #666;
}

.mobile-service-select-btn:hover {
  border-color: #2e71ff;
  color: #2e71ff;
}

.mobile-service-count {
  color: #2e71ff;
  font-weight: 500;
}

.mobile-other-service-remark {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e6eb;
}

.other-service-remark {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e6eb;
}

.mobile-schedule-modal-wrap :deep(.arco-modal) {
  max-height: 90vh;
  margin: 5vh auto;
}

.mobile-schedule-modal-wrap :deep(.arco-modal-body) {
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
}

.mobile-schedule-content {
  width: 100%;
}

.mobile-form-item {
  margin-bottom: 16px;
}

.mobile-form-item :deep(.arco-form-item-label) {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.mobile-attendees-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #e0e6ed;
  min-height: 48px;
}

.mobile-start-time-bar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #e0e6ed;
  min-height: 48px;
}

.mobile-date-time-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-date-block,
.mobile-time-block {
  padding: 4px 8px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  cursor: pointer;
  font-size: 14px;
}

.mobile-location-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #e0e6ed;
  min-height: 48px;
}

.location-value {
  color: #333;
  font-size: 14px;
}

.location-placeholder {
  color: #999;
  font-size: 14px;
}

.mobile-form-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.location-input-form-item {
  margin-bottom: 16px;
  .location-input-row {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 0 12px;
    min-height: 40px;
    .form-label {
      min-width: 70px;
      color: #333;
      font-size: 14px;
      text-align: left;
      margin-right: 12px;
      padding-left: 0;
      line-height: 40px;
    }
    .location-input-wrapper {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      .location-input-right {
        flex: 1;
        border: none;
        box-shadow: none;
        background: transparent;
        cursor: pointer;
        font-size: 15px;
        padding-right: 32px;
        height: 40px;
        line-height: 40px;
      }
      .clear-location-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
      }
    }
  }
}

.pc .location-input-form-item {
  margin-bottom: 16px;
  // 只影响PC端弹窗的地点输入区域
  .location-input-row.location-input-row-border {
    display: flex;
    align-items: center;
    background: transparent !important; // 强制无背景
    border-radius: 4px;
    padding: 0 0;
    min-height: 40px;
    border: 1px solid #d9d9d9;
    position: relative;
    // 强制覆盖所有子元素背景色
    :deep(.arco-input),
    :deep(.arco-input-wrapper),
    :deep(.arco-form-item-content),
    :deep(.arco-form-item-content-wrap) {
      background: transparent !important;
    }
    .form-label {
      min-width: 70px;
      color: #333;
      font-size: 14px;
      text-align: left;
      margin-right: 12px;
      padding-left: 0;
      line-height: 40px;
      background: transparent !important;
    }
    .location-input-right.location-input-border {
      flex: 1;
      border: none;
      border-left: 1px solid #d9d9d9;
      box-shadow: none;
      background: transparent !important;
      cursor: pointer;
      font-size: 15px;
      padding: 0 32px 0 12px;
      height: 40px;
      line-height: 40px;
      border-radius: 0 4px 4px 0;
      margin-left: 0;
    }
    .clear-location-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      background: transparent;
      border: none;
      box-shadow: none;
      color: #bbb;
    }
  }
}
// ... existing code ...
// 检查并移除全局 .location-input-row 的 background 样式，避免影响PC端弹窗
.location-input-row {
  background: none !important;
}
// ... existing code ...

.sub-meeting-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.sub-meeting-card {
  background: #fafbfc;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 18px 20px 12px 20px;
  border: 1px solid #e5e6eb;
  transition: box-shadow 0.2s;
  &:hover {
    box-shadow: 0 4px 16px #e5e6eb;
  }
}
.sub-meeting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.sub-meeting-title {
  font-size: 17px;
  font-weight: 600;
  color: #222;
}
.sub-meeting-info {
  display: flex;
  gap: 32px;
  color: #666;
  font-size: 14px;
}
.sub-meeting-time {
  font-weight: 500;
}
.sub-meeting-promoter {
  font-style: italic;
}

/* 会议室预约弹窗标签页样式 */
:deep(.arco-modal) {
  max-height: 80vh;
}

:deep(.arco-modal-content) {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

:deep(.arco-modal-body) {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.tabs-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fixed-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.tabs-content {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(80vh - 180px);
}

:deep(.arco-tabs-nav) {
  margin-bottom: 0;
}

:deep(.arco-tabs-content) {
  height: 100%;
  overflow: visible;
}

/* 会议室预约表单样式 */
.form-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-item-half {
  flex: 1;
}

.form-item-full {
  width: 100%;
}

.location-selectors {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.location-select {
  flex: 1;
}

.meeting-room-grid {
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
  max-height: 400px;
  overflow-y: auto;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
}

.room-grid::-webkit-scrollbar {
  width: 6px;
}

.room-grid::-webkit-scrollbar-thumb {
  background-color: #e5e6eb;
  border-radius: 3px;
}

.room-grid::-webkit-scrollbar-track {
  background-color: #f7f8fa;
}

.room-card {
  width: 100%;
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  box-sizing: border-box;
  background: #fff;
  cursor: pointer;
}

.room-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.room-card-selected {
  border: 2px solid #165dff;
  background: #f0f7ff;
}

.room-content {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  gap: 16px;
  min-height: 100px;
}

.room-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

.room-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.room-name {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}

.room-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #86909c;
}

.cycle-settings {
  padding: 12px;
  background: #f7f8fa;
  border-radius: 4px;
}

.weekday-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.month-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.readonly-date {
  padding: 6px 12px;
  background: #f7f8fa;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
  color: #86909c;
}

.unit-text {
  margin-left: 8px;
  color: #86909c;
  font-size: 14px;
}

.warning-text {
  color: #f53f3f;
  font-size: 12px;
  margin-top: 8px;
}

.date-time-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.datetime-container {
  display: flex;
  gap: 8px;
  flex: 1;
}

.date-picker, .time-picker {
  flex: 1;
}

/* 会议服务样式 */
.meeting-service {
  width: 100%;
  height: auto;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.meeting-service .header {
  display: flex;
  padding: 20px 24px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
}

.meeting-service .header .title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  flex: 1;
}

.meeting-service .header .actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.meeting-service .content {
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: transparent;
}

.meeting-service .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #64748b;
}

.meeting-service .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.meeting-service .empty-text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #475569;
}

.meeting-service .empty-description {
  font-size: 14px;
  color: #64748b;
}

.meeting-service .service-item {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.meeting-service .service-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.meeting-service .service-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.meeting-service .input-group {
  display: flex;
  align-items: center;
  flex: 1;
}

.meeting-service .input-group.other-service {
  flex: 1;
  width: 100%;
}

.meeting-service .label {
  min-width: 80px;
  font-weight: 500;
  color: #374151;
  margin-right: 12px;
  white-space: nowrap;
}

.meeting-service .input {
  flex: 1;
}

.meeting-service .input.full-width {
  width: 100%;
}

.meeting-service .service-input {
  cursor: pointer;
}

.meeting-service .service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.meeting-service .service-name {
  font-weight: 500;
  color: #1d2129;
  font-size: 14px;
}

.meeting-service .service-description {
  color: #86909c;
  font-size: 12px;
  line-height: 1.4;
  padding-left: 8px;
  border-left: 3px solid #e5e6eb;
}

/* 会议类型按钮样式 */
.meeting-type-buttons {
  display: flex;
  gap: 12px;
}

.meeting-type-buttons .arco-btn {
  min-width: 120px;
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s;
}

.meeting-type-buttons .arco-btn-outline {
  border-color: #d1d5db;
  color: #6b7280;
}

.meeting-type-buttons .arco-btn-outline:hover {
  border-color: #165dff;
  color: #165dff;
}

.selected-users {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f7f8fa;
  border-radius: 6px;
  border: 1px solid #e5e6eb;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.user-name {
  font-size: 14px;
  color: #1d2129;
}

.delete-btn {
  cursor: pointer;
  color: #f53f3f;
  font-size: 12px;
  margin-left: 4px;
}

.delete-btn:hover {
  color: #cb272d;
}
</style>

<style scoped lang="less">
.attendees-container {
  width: 100%;
}

.gray-btn {
  height: 32px;
  min-width: 110px;
  border-radius: 4px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #333;

  &:hover {
    background-color: #e8e8e8;
    color: #333;
  }
}

.link-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -0.2em; // 调整图标上下居中位置
}
</style>

<style lang="scss" scoped>
.more-icon {
  color: #333;
}
</style>

<style lang="scss" scoped>
.location-input-right ::v-deep .ant-input {
  text-align: right;
}

.pc .subject-input :deep(.arco-input),
.pc .subject-input :deep(.arco-input[status]),
.pc .subject-input :deep(.arco-input:not([disabled])) {
  background: #f5f5f5 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.2s;
}
// ... existing code ...
</style>

// ... existing code ...
// 删除上一版的:deep(.arco-modal) .subject-input :deep(.arco-input)全局影响

/** 统一 .subject-input 相关样式，区分PC弹窗和移动端，去除重复和冲突 **/

/* PC端弹窗会议主题输入框灰色，仅影响弹窗内第一个主题输入框 */
:deep(.arco-modal) .subject-input.subject-theme :deep(.arco-input) {
  background: #f5f5f5 !important;
}

/* 主题输入框通用样式 */
.subject-input {
  :deep(.arco-input) {
    height: 40px;
    font-size: 16px;
  }
  position: relative;
  margin-bottom: 16px;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  border: none;
  background: transparent;
}
.subject-input-wrapper {
  position: relative;
  width: 100%;
}
.clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #bbb;
  z-index: 2;
}
// 隐藏字数提示
.subject-input :deep(.arco-input-suffix) {
  display: none !important;
}

/* 参会人部分样式不变，保持原有背景色 */
.attendees-input {
  background: #f5f5f5;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

// ... existing code ...
// 删除所有重复的 .subject-input 相关样式和PC端/移动端相关的背景色定义，只保留上面一份

// ... existing code ...
// ====== 统一并精简会议主题输入框样式，彻底去除边框和阴影 ======
.subject-input :deep(.arco-input) {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
// ... existing code ...

<style lang="scss" scoped>
// ... existing code ...
.subject-align-row {
  display: flex;
  align-items: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.subject-align-row .subject-input-wrapper {
  flex: 1;
  width: 100%;
}
.subject-align-row :deep(.arco-input) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  height: 40px;
  font-size: 16px;
  padding-left: 0 !important;
  padding-right: 32px !important;
}
// ... existing code ...
</style>

<style lang="scss" scoped>
// ... existing code ...
.subject-bg-row {
  background: #f5f5f5 !important;
  border-radius: 4px;
  transition: box-shadow 0.2s, border 0.2s;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 0 0 !important;
}
.subject-bg-row :deep(.arco-input) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.subject-bg-row:focus-within {
  border: 1.5px solid #165DFF !important;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.08);
  background: #f5f5f5 !important;
}
// ... existing code ...
.compact-attendees {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-left: 10px; // 增加10px左边距
}
.attendee-card {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 4px 8px 4px 4px;
  min-width: 120px;
  max-width: 180px;
  height: 36px;
  box-sizing: border-box;
  font-size: 13px;
  position: relative;
  transition: box-shadow 0.2s;
  box-shadow: none;
  margin-left: 6px;
}
.attendee-card .attendee-avatar {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attendee-card .attendee-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.attendee-card .attendee-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: #333;
  margin-right: 22px; // 给移除按钮留空间
}
.attendee-card .remove-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #bbb;
  padding: 0;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  z-index: 2;
  background: transparent;
}
// ... existing code ...
</style>

<style lang="scss" scoped>
.all-attendees-modal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin-top: 4px;
  padding-left: 0;
  flex-direction: row;
}
.all-attendees-modal-list .attendee-col-2 {
  width: calc(50% - 8px); /* 一行2个，间隔8px */
  margin-right: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.all-attendees-modal-list .attendee-col-2:nth-child(2n) {
  margin-right: 0;
}
.remind-select-form-item {
  margin-bottom: 16px;
  .remind-select-row {
    display: flex;
    align-items: center;
    .form-label {
      min-width: 70px;
      color: #333;
      font-size: 14px;
      text-align: left;
      margin-right: 12px;
      line-height: 40px;
    }
    .arco-select {
      flex: 1;
    }
  }
}
</style>

<style lang="scss" scoped>
.attendee-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 32px;
  margin-left: 8px;
  border-radius: 16px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.10);
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
  user-select: none;
  border: none;
}
.attendee-more-btn:hover {
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.18);
  transform: translateY(-2px) scale(1.04);
}

/* 新增水平布局表单样式 */
.mobile-form-row {
  display: flex;
  align-items: center;
  padding: 12px 16px; /* 减少垂直内边距 */

  .form-label {
    width: 48px; /* 减少标签宽度 */
    font-size: 14px; /* 减小字体 */
    color: #333;
    flex-shrink: 0;
  }

  .mobile-attendees-bar {
    flex: 1;
    margin-left: 12px;
  }

  .mobile-start-time-wrapper-left {
    flex: 1;
    margin-left: 12px;
    background: white;
    border-radius: 4px;
    padding: 6px 8px; /* 减少内边距 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px; /* 减少间距 */
  }

  .mobile-duration-wrapper-left {
    flex: 1;
    margin-left: 12px;
    padding: 6px 8px; /* 减少内边距 */
    background: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px; /* 减少间距 */

    .duration-value {
      color: #333;
      font-size: 13px; /* 减小字体 */
    }
  }

  .mobile-location-input-white {
    flex: 1;
    margin-left: 12px;
    padding: 6px 8px; /* 减少内边距 */
    background: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    .location-value {
      color: #333;
      font-size: 13px; /* 减小字体 */
    }

    .location-placeholder {
      color: #999;
      font-size: 13px; /* 减小字体 */
    }
  }

  .select-wrapper {
    flex: 1;
    margin-left: 12px;
  }

  .setting-wrapper {
    flex: 1;
    margin-left: 12px;
  }
}

/* 主题输入框样式 */
.subject-row-full {
  padding: 16px 16px 12px 16px; /* 减少上下内边距 */
  background: transparent;

  .subject-input-native {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 18px; /* 减小字体 */
    font-weight: 400;
    padding: 8px 0; /* 减少内边距 */
    min-height: 40px; /* 减少最小高度 */
    color: #333;
    font-family: inherit;

    &::placeholder {
      color: #999;
      font-size: 18px; /* 减小字体 */
      font-weight: 400;
    }

    &:focus {
      outline: none;
      border: none;
      background: transparent;
    }
  }
}

/* 分隔线样式 */
.form-divider {
  height: 1px;
  background: #f5f5f5;
  margin: 0 16px;
}

/* 开始时间灰色块样式 */
.mobile-date-block-gray,
.mobile-time-block-gray {
  display: inline-block;
  padding: 4px 6px; /* 减少内边距 */
  background: #f5f5f5;
  border: none;
  border-radius: 3px;
  color: #333;
  font-size: 12px; /* 减小字体 */
  cursor: pointer;
  margin-right: 4px; /* 减少间距 */
  min-width: 45px; /* 减少最小宽度 */
  text-align: center;
  white-space: nowrap; /* 防止文字换行 */
  line-height: 1.2; /* 优化行高 */

  &:last-child {
    margin-right: 0;
  }

  &:hover {
    background: #e8e8e8;
  }
}

/* 底部按钮样式 */
.mobile-bottom-buttons {
  display: flex;
  gap: 12px;
  padding: 12px 16px; /* 减少内边距 */

  .mobile-cancel-btn,
  .mobile-confirm-btn {
    flex: 1;
    height: 44px; /* 减少按钮高度 */
    font-size: 15px; /* 减小字体 */
    font-weight: 500;
    border-radius: 6px; /* 减少圆角 */
  }

  .mobile-cancel-btn {
    background: #f5f5f5;
    border: none;
    color: #666;

    &:hover {
      background: #e8e8e8;
    }
  }

  .mobile-confirm-btn {
    background: #1890ff;
    border: none;

    &:hover {
      background: #40a9ff;
    }

    &:disabled, &.is-disabled {
      background: #d9d9d9 !important;
      border-color: #d9d9d9 !important;
      color: #999 !important;
      cursor: not-allowed !important;
      opacity: 0.6 !important;
      pointer-events: none !important;

      &:hover, &:active, &:focus {
        background: #d9d9d9 !important;
        border-color: #d9d9d9 !important;
        color: #999 !important;
        box-shadow: none !important;
        transform: none !important;
      }
    }
  }
}

/* 时长选择弹窗样式 */
.duration-options {
  padding: 8px 0;
  max-height: 400px;
  overflow-y: auto;

  .duration-option {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    border-radius: 4px;
    margin: 2px 0;

    &:hover {
      background: #f5f5f5;
    }

    &.selected {
      background: #e6f7ff;
      color: #1890ff;
    }
  }
}

.mobile-duration-modal-wrap {
  .arco-modal {
    max-width: 90vw;
  }
}
/* 参会人选择弹窗样式 */
.mobile-user-selector-modal-wrap {
  :deep(.arco-modal) {
    max-height: 85vh !important;
    margin: 7.5vh auto !important;
    max-width: 90vw !important;
  }

  :deep(.arco-modal-body) {
    padding: 16px !important;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

.user-selector-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .modal-search-results {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fafafa;
  }

  .search-result-item {
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background: #f5f5f5;
    }

    .user-option-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin: 0 12px;
      object-fit: cover;
    }

    span {
      font-size: 14px;
      color: #333;
    }
  }

  .invite-tree {
    flex: 1;
    min-height: 200px;

    :deep(.arco-tree-node) {
      padding: 4px 0;
    }

    :deep(.arco-tree-node-title) {
      font-size: 14px;
    }
  }
}

.selected-users-preview {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  margin-top: 16px;

  .selected-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    font-weight: 500;
  }

  .selected-users-avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 120px;
    overflow-y: auto;
  }

    .selected-avatar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    transition: all 0.2s ease;

    &.clickable {
      cursor: pointer;

      &:hover {
        transform: scale(0.95);

        .avatar-wrapper .remove-overlay {
          opacity: 1;
        }
      }
    }

    .avatar-wrapper {
      position: relative;
      margin-bottom: 4px;

      img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        transition: all 0.2s ease;
      }

      .remove-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;

        .remove-icon {
          color: white;
          font-size: 14px;
        }
      }
    }

    .user-name {
      font-size: 12px;
      color: #666;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }

    &.clickable:hover .user-name {
      color: #f56565;
    }
  }
}

.user-selector-footer {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  margin-top: 16px;
  flex-shrink: 0;
}

/* 移动端表单优化样式 */
.mobile-schedule-modal-wrap {
  :deep(.arco-modal) {
    max-height: 95vh !important; /* 增加最大高度 */
    margin: 2.5vh auto !important; /* 减少顶部边距 */
    width: 95vw !important;
    max-width: 95vw !important;
  }

  :deep(.arco-modal-body) {
    padding: 0 !important;
    background: #f8f9fa;
    max-height: 80vh; /* 增加最大高度 */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .mobile-schedule-content {
    background: #f8f9fa;
    min-height: auto;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 100px; /* 为底部按钮留出更多空间 */
  }

  .mobile-form-footer {
    background: white;
    margin-top: 0;
    border-top: 1px solid #f0f0f0;
    position: absolute; /* 改为绝对定位 */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  }

  /* 确保模态框内容不会被底部按钮遮挡 */
  :deep(.arco-modal-container) {
    padding-bottom: 0 !important;
  }
}
</style>
